Optimized images not found because theyre not in root

[kevincarld]

Hi,
Im using next export and the images are not found, How do I make it such that the beginning path of images has "./" instead of "/".

Thanks

[Niels-IO]

Hi @kevincarld,

Could you please explain the use case of "./" instead of "/" to me? Can you share an example of how you are using the ExportedImage component?

[kevincarld]

Hi @Niels-IO , actually I think I just have the same issue as the other comments. Because the static site im exporting won't be in the root directory that's why image src's are having issue

[Rashair]

Can this be reopened? My images are not found after proper export:

Code:

  import logo from "public/images/logo.png";
...
 <ExportedImage src={logo} style={{height: "100%", width: "auto"}}
                             alt="Faces in front of each other"/>

package.json
"build:docker": "next build && next export -o .export && next-image-export-optimizer --exportFolderPath .export",

DockerFile:
WORKDIR /app/clientApp
COPY --from=builder /opt/app/.export ./

Container:

The app:

It seems like the path should be under images?

[Rashair]

Actually, the name is wrong:
Should be logo-opt-10.WEBP
Not logo.bc950706-opt-10.WEBP
Any idea why this random identified is added?

[Niels-IO]

Hi @Rashair,

After you run the command "build:docker", you should see a folder called nextImageExportOptimizer inside the .export folder. (I confirmed with the example app in this module that this is correctly working).

Then the URL in the browser would resolve as the images are stored in the nextImageExportOptimizer folder, which is indeed at the root level. The random hash is actually created by next.js as you have used statically imported images, and this is how they handle it. As the srcset uses the images with the added hash and the images in the folder nextImageExportOptimizer are named accordingly, everything matches.

Where are the optimized images placed if you run the build:docker command?

[Rashair]

There only under 'images' - nowhere else. The nextImageExportOptimizer folder does not appear. I've also tried on your example app and it works locally for me there, but not in my own app :/

[Rashair]

I think the issue is with the statically imported images - other seem to work

[Niels-IO]

Hi @Rashair,

I am currently a little bit clueless about how to help you further. Could you create a minimal example that reproduces the error?

[Rashair]

I think I found the issue - I have a custom distDir, it's .build, not .next.
Here's a reproduction using your example:
https://github.com/Rashair/next-image-export-optimizer-78
(The reproduction only works on the clean repo - if you don't have .next dir there, otherwise it will supposedly copied from there)

[Niels-IO]

Hi @Rashair,

Thank you very much! This is indeed the issue, and I found an easy fix. I will release it in the next patch version.