Optimized images not found because theyre not in root about next-image-export-optimizer HOT 10 CLOSED

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?

from next-image-export-optimizer.

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

from next-image-export-optimizer.

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?

from next-image-export-optimizer.

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?

from next-image-export-optimizer.

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?

from next-image-export-optimizer.

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 :/

from next-image-export-optimizer.

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

from next-image-export-optimizer.

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?

from next-image-export-optimizer.

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)

from next-image-export-optimizer.

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.

from next-image-export-optimizer.