Drupal 10 image styles not generating

Today, I'm going to walk you through troubleshooting an issue that many of us encounter: image styles not generating in Drupal 10. This can be frustrating, but fear not—I'm here to help you resolve it step by step.

Understanding Image Styles in Drupal

Firstly, let's clarify what image styles are in Drupal. Image styles are predefined sets of image effects that can be applied to an image when it is displayed. These effects can include resizing, cropping, adding watermarks, and more. They are powerful tools for manipulating images without altering the original files.

Clear Drupal Cache

Sometimes, stale cache files can cause issues with image style generation. Clear Drupal's cache to ensure that any changes to configuration or code are recognized:

• Navigate to Administration → Configuration → Development → Performance or directly at admin/config/development/performance.
• Click on "Clear all caches" to flush the cache.

Check Image Style Configuration

Verify that your image styles are configured correctly:

Navigate to Administration → Configuration → Media → Image styles or directly at admin/config/media/image-styles.
Ensure that the image styles you are trying to use are defined correctly with the appropriate effects (e.g., scale, crop, rotate).

If everything is OK and still image styles are not getting generated, we have to add some settings in the settings file to force fully fix this issue.

$config['image.settings']['suppress_itok_output'] = TRUE;
$config['image.settings']['allow_insecure_derivatives'] = TRUE;

Clear all caches and reload the page now it should work.

For further reading and resources, I recommend checking out the Drupal documentation on image styles