search

Niels-IO / next-image-export-optimizer

Use Next.js advanced <Image/> component with the static export functionality. Optimizes all static images in an additional step after the Next.js static export.
413 stars 51 forks source link

Personalize file names #180

Closed Davide-Milan closed 1 week ago

Davide-Milan commented 7 months ago

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

terijaki commented 4 months ago

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“

webdev-eurid commented 4 months ago

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: https://github.com/Niels-IO/next-image-export-optimizer/blob/6d9dd438a321d86a3f5874136313ce3a5a20132a/src/utils/getRemoteImageURLs.ts#L21 so that i can be used as replacement for the hostname if specified.

Niels-IO commented 2 months ago

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

Niels-IO commented 3 weeks ago

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)