ImageOptimize not using image url specified in my multi-environment setup and my volume config

Question

When I output my ImageOptimize field in the template, my images are not showing up. If you inspect the image url, it's missing a folder name I'm specifying as part of the url in my multi-environment setup and volume config.

If I manually change the image url in the browser tools to include the missing folder, the image shows up. Other images are rendered fine when using the standard asset field code so I'm not sure what could be wrong.

Things to note:

• I am using Andrew's multi-environment setup.
• I have two separate folders in my web root folder:
  • In the folder assets/, I'm serving my template assets like css, images, and fonts.
  • In the folder content/, I'm serving the files uploaded to the volumes I have setup in Craft - images, logos, documents etc.

My environment variables:

'BASE_URL' => $protocol . $httpHost . '/',

'BASE_PATH' => realpath(dirname(__FILE__)) . '/web/content/',

My aliases (set for all environments):

'aliases' => [
    '@basePath' => getenv('CRAFTENV_BASE_PATH'),
    '@baseUrl' => getenv('CRAFTENV_BASE_URL'),
],

My volume config:

'*' => [
    'images' => [
        'path' => '@basePath/images',
        'url' => '@baseUrl/content/images',
    ],
],

My ImageOptimize snippet:

<img src="{{ optimizedImages.src() }}"
             srcset="{{ optimizedImages.srcset() }}"
             sizes="100vw" />

The image path being used on the frontend (note the absence of the content/ folder):

<img src="https://franklin.test/images/_1920x1080_crop_center-center_82_line/national-formulation-centre.jpg" srcset="https://franklin.test/images/_1920x1080_crop_center-center_82_line/national-formulation-centre.jpg 1920w">

Answer 1

You need to re-index your assets to show the correct URL after changes to your volume location when using imageOptimize. Just re-save the volume from within Craft CMS. Even if you have made amends to your volume config file you will need to re-save from within Craft CMS.

To quote Andrew, the plugin author...

"So I want to say that this is normal (though maybe not desirable?)l. The URLs in the OptimizedImages fields get resolved at asset save time. So the full absolute URL to each image will resolve to whatever the alias is.

Potentially this resolution could be postponed until runtime, but in the interim, if you re-index your assets on the environment."