allow image export to remote edge server about next-image-export-optimizer HOT 4 CLOSED

Hi @augustblack,

Thanks for the kind words!
So if you want one folder with all images inside, then use statically imported images. All optimized images will be placed in a folder called nextImageExportOptimizer at the root level of your export folder.
Duplicated folders could exist if you store your statically imported image in the same place, next-image-export-optimizer is looking for images (nextImageExportOptimizer_imageFolderPath).

In the dev tools of Chrome, you should see the generated srcset like this:

If that is not the case, then something else might be wrong.

You could only work with find and replace if you have a completely static app. As soon as React will be hydrated, then the URL will change again to the one this module is generating.

The solution is quite straightforward. You could add the absolute URL for the images to the loader function. Part of how it is currently done is shown in this snippet:

  let generatedImageURL = `${
    isStaticImage ? "" : correctedPath
  }${exportFolderName}/${filename}-opt-${width}.${processedExtension.toUpperCase()}`;
  // if the generatedImageURL is not starting with a slash, then we add one
  if (generatedImageURL.charAt(0) !== "/") {
    generatedImageURL = "/" + generatedImageURL;
  }

  return generatedImageURL;
};

You would prepend the string "generatedImageURL" with your absolute URL. This is also in agreement with the official Next.js docs: https://nextjs.org/docs/api-reference/next/image#loader-configuration

As this is a special use case, I recommend you fork your own version of this module.

from next-image-export-optimizer.

Hi @Niels-IO

Thanks for the reply. I'm still trying to figure out what is going on.

I'm observing some strange behavior on the export in general. In my setup, I have removed all images from the ./public folder. Any image src on <ExportedImage /> is statically imported. I am exporting with next build && next export && next-image-export-optimizer and default settings

First, it appears with a simple export, the blur images are not getting used. The images load with a blank first and then come in with the full image (even though placeholder="blur" is set and was working in the past versions).

Second, it seems as if the first url that is loaded is /_next/static/media/<filename> and not /nextImageExportOptimizer/<filename>

Third, when I run a simple static html server (eg. python3 -m http.server) on the exported output, it seems as if either this module or next.js (not sure which) is prepending a full http://hostname:port to the URL - instead of src="/filename" it is setting src="http://localhost:8000/filename" Ideally, the image src would only have a relative path to the hostname and not include the hostname in the URL.

Do you happen to know why /_next/static/media/<filename> is created at all?

from next-image-export-optimizer.

First, it appears with a simple export, the blur images are not getting used. The images load with a blank first and then come in with the full image (even though placeholder="blur" is set and was working in the past versions).

Are you using Firefox? Blurry placeholders currently do not work in Firefox, unfortunately. The background image does not get displayed.

Second, it seems as if the first url that is loaded is /_next/static/media/ and not /nextImageExportOptimizer/

This is only the case when the optimized images cannot be found, and the /_next/static/media/ is then used as a fallback. Could you please check whether the folder nextImageExportOptimizer was generated in your public folder and contains the optimized images?

Third, when I run a simple static html server (eg. python3 -m http.server) on the exported output, it seems as if either this module or next.js (not sure which) is prepending a full http://hostname:port to the URL - instead of src="/filename" it is setting src="http://localhost:8000/filename" Ideally, the image src would only have a relative path to the hostname and not include the hostname in the URL.

This is not done purposely by this module. I guess that it is also happening in the standard Next.js image component.

Do you happen to know why /_next/static/media/ is created at all?

This is where Next.js stores the optimized statically imported images.

from next-image-export-optimizer.

Hi,

I'm not using firefox and was having issues with the blur in chrome.

The nextImageExportOptimizer folder was created and all the files are there.

Ultimately, I did a little digging and decided to use the base Image module of next but set a custom loader.
That doesn't auto-generate the images like this module does, but was more straightforward for my use case.

thanks for the attention and for this software - I still use it in other cases.

from next-image-export-optimizer.