I would like to know how I can get clean image url's with next/image component in Next.js.
Current URL Example below:
https://www.example.com/_next/image?url=%2Fimages%2Fhome%2FDog-image-1.jpg&w=384&q=100
Is it possible to change the above URL every time like the URL below:
https://www.example.com/_next/image/Dog-image-1.jpg
or like this:
https://www.example.com/_next/image/images/home/Dog-image-1.jpg
How to get clean URLs using next/image component for images.
Thank You for your participation.
Image resources may be directly accessed via URL by typing their /name.format if they reside in the public folder on the root of your Next.js app.
Example:
If I wish to access Dog-image-1.jpg that is found in the root of the public folder (no sub-directories) — I'll need to type https://www.example.com/Dog-image-1.jpg
If I wish to access this same image through https://www.example.com/image/Dog-image-1.jpg then I need to create an image sub-folder in the public directory.
The image may be nested as much as possible, one just needs to create the appropriate sub-folders.
Is this what you are looking for?
This might interest you otherwise.
