Applying image style breaks image src

Question

I have added simple blogging functionality to my Drupal Site using a custom content type named Blog that I created.

One of the fields in Blog content type is a image field.

Inorder to display a list of teaser blog posts, I created a view with a page named Blog List.

This view displays a list of Blogs using the Teaser view mode.

This works fine until I try change the image style associated to the Teaser view mode for the Blog content type.

When the Image Style is set to None(Origional Image), all the images are visible for the teasers on my Blog List view page.

When I change the image style to anything else like "Medium 220x220" for example, the images for the Blog teasers do not display on my Blog List views page and it appears if their links are broken. I have also noticed that when I apply a Image style the Blogs teaser display image field, the image src is appended with something like "?itok=R1dYIZFH", when I temporarily remove this param, the image is displayed.

I am trying to do all of this through the UI.

Any help and suggestions would be greatly appreciated <3

Answer 1

The ?itok='xxxxxx' is normal. This is to prevent possible DDoS attacks.

This problem can be broken down to a couple of things to check.

First, you need to check if the image is actually being created properly. You can do this by looking in your public files directory under styles/[image style]/public/[path to original] (e.g. does public:/resources/foo.png exist in the directory sites/default/files/styles/medium/public/resources/. You should see the new image there.

If not, then there is a problem generating the image. Check the status report to verify that a graphics tool exists. Also check the logs for errors.

Common problems here are that the directory rights are not set correctly and the system can not create the file.

If the image file exists, you may be having a browser cache issue. Most browsers will latch onto a 404 and not try to reload it. You will need to force a full page reload (Shift F5 in most browsers) or clear cache / view from an incognito to see the image. Only on your test browser. Once it is created, others will not have this problem.

Another possiblity is that your site is using an upstream caching service, e.g. CloudFlare, Varnish, etc. This service may be caching the initial 404 and not letting people see the image.

If there are still problems, please update with more information, including a URL.