How to get Responsive Image Styles to work with existing images?

Question

We have existing images that never had an image style applied to them. As part of the cleanup, we are now using Responsive Image Module to do this per breakpoint. AFter creating the different image styles, we created the appropriate Responsive Image styles and applied them to the image fields through the View Modes. However, when we load the page after the Responsive image styles is applied, we get a 404 error for the image's URL. Looks like it did not create one.

How can we create the necessary images with the appropriate image styles such that we only need to modify/clear the images for that image style? We attempted to re upload the image and deleting it and adding it, but neither worked.

We even attempted the following Drush commands but they did not work. According to Drush Commands for image flush the images would be regenerated on the fly but that is not happening.

drush if --all
drush if max_650x650

Updated solution:

I simply changed themes and then switched back to my desired theme and it seemed to work. It was very odd, but effective. I did not have to make any other changes.

Answer 1

You have cleared cache? This is when Drupal will generate the images based on any image style applied in the display settings.

"drush cc all" or "drush cr" depending on your version.

Unfortunately I have never used the Responsive Image Module so cannot say why you get a 404.

Answer 2

What web server are you using? If nginx you might want to look at your site config.

I have the following in my drupal nginx config:

  # Set up a rewrite.
  location @rewrite {
    rewrite ^/(.*)$ /index.php?q=$1;
  }

  location ~ ^/sites/.*/files/styles/ { # For Drupal >= 7
    try_files $uri @rewrite;
  }

  location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
    try_files $uri @rewrite;
    expires max;
    log_not_found off;
  }

Since you said you never used image styles before, I assumed you might be missing these in your configuration.