nextjs not caching image
Unanswered
Asian black bear posted this in #help-forum
Asian black bearOP
nextjs 13.4 -- I have an image in the public directory -- public/assets/ban.png and I am referencing it in <NextImage src='/assets/ban.png' ... />. however, it looks like it gets served as /_next/image?url=%2Fassets%2Fban.png&w=128&q=75 where nextjs doesn't apply cache headers to it. if I do import ban from '/public/assets/ban.png' and reference it in <NextImage src={ban} ... /> then it gets served as /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fban.de4dd9a6.png&w=128&q=75 with the expected cache headers applied.
does this mean that I must import the static asset file in order for the cache headers to work properly?
does this mean that I must import the static asset file in order for the cache headers to work properly?
1 Reply
@Asian black bear nextjs 13.4 -- I have an image in the public directory -- public/assets/ban.png and I am referencing it in <NextImage src='/assets/ban.png' ... />. however, it looks like it gets served as /_next/image?url=%2Fassets%2Fban.png&w=128&q=75 where nextjs doesn't apply cache headers to it. if I do import ban from '/public/assets/ban.png' and reference it in <NextImage src={ban} ... /> then it gets served as /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fban.de4dd9a6.png&w=128&q=75 with the expected cache headers applied.
does this mean that I must import the static asset file in order for the cache headers to work properly?
Lilac
Yes, This allows Next.js to process the image during build time, generate optimized versions, and serve them with appropriate cache headers.
I think that is what the official examples does. Please have a look here https://github.com/vercel/next.js/tree/canary/examples/image-component
I think that is what the official examples does. Please have a look here https://github.com/vercel/next.js/tree/canary/examples/image-component