Question about Image src (NEXT 14)
Unanswered
Transvaal lion posted this in #help-forum
Transvaal lionOP
I passed the src into Next image like this below. When I inspected the code, it showed http://localhost:3000/_next/image?url=%2Fassets%2FservicesPage%2Fservices%2Fsecurity-system.png&w=1080&q=75. I would like to show the path like this http://localhost:3000/assets/servicesPage/services-banner-1.png. How can I achieve this? It's fine when I used
.svg. Thank you. <Image
fill
src="/assets/servicesPage/services/security-system.png"
alt="security system"
style={{ objectFit: 'cover' }}
sizes="(max-width: 900px) 0vw, (max-width: 1200px) 50vw, 33vw"
/>53 Replies
@Transvaal lion I passed the src into Next image like this below. When I inspected the code, it showed http://localhost:3000/_next/image?url=%2Fassets%2FservicesPage%2Fservices%2Fsecurity-system.png&w=1080&q=75. I would like to show the path like this http://localhost:3000/assets/servicesPage/services-banner-1.png. How can I achieve this? It's fine when I used `.svg`. Thank you.
tsx
<Image
fill
src="/assets/servicesPage/services/security-system.png"
alt="security system"
style={{ objectFit: 'cover' }}
sizes="(max-width: 900px) 0vw, (max-width: 1200px) 50vw, 33vw"
/>
hi, You could pass
unoptimized prop to <Image /> but the image will be unoptimized@Ray hi, You could pass `unoptimized` prop to `<Image />` but the image will be unoptimized
Transvaal lionOP
Thanks Ray. On production, it only stores https://www.xxxdomain.com/assets/servicesPage/services/security-system.png but the src is point to https://www.xxxdomain.com/_next/image?url=%2Fassets%2FservicesPage%2Fservices%2Fsecurity-system.png&w=1080&q=75. What can I do if I want to keep the images optimized.
@Transvaal lion Thanks Ray. On production, it only stores https://www.xxxdomain.com/assets/servicesPage/services/security-system.png but the src is point to https://www.xxxdomain.com/_next/image?url=%2Fassets%2FservicesPage%2Fservices%2Fsecurity-system.png&w=1080&q=75. What can I do if I want to keep the images optimized.
yes this is how image optimisation work with the <Image /> component
btw why would you want to keep the url?
@Ray btw why would you want to keep the url?
Transvaal lionOP
because the image is not found on production if using _next/image?url=%2Fassets%2FservicesPage%2Fservices%2Fsecurity-system.png&w=1080&q=75
ok i see the problem
you should import the image
you should import the image
import securitySystemImage from "/assets/servicesPage/services/security-system.png"
<Image
fill
src={securitySystemImage}
alt="security system"
style={{ objectFit: 'cover' }}
sizes="(max-width: 900px) 0vw, (max-width: 1200px) 50vw, 33vw"
/>@Transvaal lion I passed the src into Next image like this below. When I inspected the code, it showed http://localhost:3000/_next/image?url=%2Fassets%2FservicesPage%2Fservices%2Fsecurity-system.png&w=1080&q=75. I would like to show the path like this http://localhost:3000/assets/servicesPage/services-banner-1.png. How can I achieve this? It's fine when I used `.svg`. Thank you.
tsx
<Image
fill
src="/assets/servicesPage/services/security-system.png"
alt="security system"
style={{ objectFit: 'cover' }}
sizes="(max-width: 900px) 0vw, (max-width: 1200px) 50vw, 33vw"
/>
if you want to use url, you should move the
then you could use like this
assets folder inside the public folderthen you could use like this
<Image
fill
src="/assets/servicesPage/services/security-system.png"
alt="security system"
style={{ objectFit: 'cover' }}
sizes="(max-width: 900px) 0vw, (max-width: 1200px) 50vw, 33vw"
/>@Ray if you want to use url, you should move the `assets` folder inside the `public` folder
then you could use like this
ts
<Image
fill
src="/assets/servicesPage/services/security-system.png"
alt="security system"
style={{ objectFit: 'cover' }}
sizes="(max-width: 900px) 0vw, (max-width: 1200px) 50vw, 33vw"
/>
Transvaal lionOP
Yes, the image is put under
public folder@Transvaal lion Yes, the image is put under `public` folder
how do you deploy your site?
can you open the image with https://www.xxxdomain.com/assets/servicesPage/services/security-system.png ?
@Ray can you open the image with https://www.xxxdomain.com/assets/servicesPage/services/security-system.png ?
Transvaal lionOP
Yes, I can open it.
@Ray how do you deploy your site?
Transvaal lionOP
build a docker image and upload it to EC2
look like something wrong with image optimisation on your setup
Transvaal lionOP
it is saying
"url" parameter is requiredhave you used the wrong url?
oh there is a space
Transvaal lionOP
there is no space when I tried it. I removed it https://www.xxxdomain.com/_next/image?url=https://www.xxxdomain.com/assets/servicesPage/services/security-system.png?w=1080&q=75
then the url should be provided
oh wait
it said w is required right?
Transvaal lionOP
tried before as well. same message "url" parameter is required
Transvaal lionOP
I can't. because it's a test site for a company.
any guide to set up image optimization on our own?
well, I would suggest try importing the image instead and try if it work with passing
unoptimized props to <Image />it should be working out of the box
it is how it look like when image optimization enabled
are you using standalone output?
@Transvaal lion Yes, I can open it.
nm, if you can open with this url
@Ray it is how it look like when image optimization enabled
Transvaal lionOP
No, I didn 't use standalone output
@Ray well, I would suggest try importing the image instead and try if it work with passing `unoptimized` props to `<Image />`
Transvaal lionOP
it's working fine with unoptimized.
@Transvaal lion because the image is not found on production if using _next/image?url=%2Fassets%2FservicesPage%2Fservices%2Fsecurity-system.png&w=1080&q=75
you said the image is 404 not found on production, how about in dev mode?
the url should look the same in dev
Transvaal lionOP
dev mode is working fine with optimized
how do you start the production build?
or how do you deploy it to production?
Transvaal lionOP
so maybe the docker image is not setup properly
Transvaal lionOP
ok thank you for your help.
@Transvaal lion ok thank you for your help.
np, let me know when it works
Transvaal lionOP
Sure.