Niels-IO/next-image-export-optimizer

Personalize file names

Closed this issue · 4 comments

Hello
I've stumbled upon this library looking for a way to save remote images during build time and this seems to be working great for doing so.
The thing is, would it be possible to add a prop to the component to let the developer give specific names to the images? Or something like that. Or just simply remove by default the file origin URL and just leave the file name for the generated files.
For example today I've been looking into the source code to try and edit the filenames, in order to hide the file origin (i.e., I don't want a potential user to be able to see on what CDN I'm hosting my image assets) and only keep the file name.
For example, if the image was taken from "my-special-cdn.com/various paths/MY_IMAGE.png" I'm making it become only "MY_IMAGE.png" so that the end user in case would see only the href to "buildPath/MY_IMAGE.png"

On Monday I will keep looking into it for making it work with this behaviour ^ locally

Or I would imagine something like

<ExportedImage
  src="images/VERY_LARGE_IMAGE.jpg"
  alt="Large Image"
  name="Image-new-name"
/>;

Where the name prop directly overwrites the original file name from the URL

This would be a nice feature!
Alongside specifying whetere the remote images are stored. The root directory is not the best place imo. I‘d like the images to be in my NextJs public/images directory. e.g. “public/images/remote“

I was looking into this feature and i was surprised that it was not doable.
After looking at the code it seems that the issue comes when downloading the pictures, it would be nice to have an option to rename them when saved to obfuscate the source.
An easy way to fix this would be to add a property in env, i.e nextImageExportOptimizer_remoteImageFilenameSource or something.
And use it here:

const remoteImageFilenames = remoteImageURLs.map((url: string) => {

so that i can be used as replacement for the hostname if specified.

Hi, I will take a look into it, when I revamp the remote image functionality a bit. Hopefully in May.

Hey @Davide-Milan, you can do this using overrideSrc which became available in Nextjs v14.2.0. I added it to the README as a solution to hide the URL from the end user (but I am not sure if it will never make it to the client bundle)