Local image path doesn't work
Answered
Cape lion posted this in #help-forum
Cape lionOP
App RouterIf I use this
import carouselImage0 from '@/public/images/carousel/carousel-slide-0.jpg'<Image
fill
src={carouselImage0.src}alt="Image"
/>
Then it works good.
But I need the absolute path to the file immediately, because I need to assign it to the product field in the database.
So I tried those options and it didn't work for me:
1. The public folder is located in root folder
2. Path in src="" used without
public/ (I've tried many different paths. But this one is from the next.js docs)Example:
<Image
fill
src="/images/categories/sets.jpg"alt="Image"
/>
In result I'm getting an error:
The requested resource isn't a valid image for /images/carousel/carousel-slide-0.jpg received text/html; charset=utf-8I also used the
remote images and added in next.config.js remotePatterns but I don't think it could have caused the problem to import local image. (I can't test, if I remove these settings, then the build crashes).Answered by Cape lion
Decision - https://github.com/vercel/next.js/discussions/37609
Problem: I also used
and not excluded change paths for _next/image | _next/static folders
export function middleware(request: NextRequest) {
const {pathname} = request.nextUrl
if (
pathname.startsWith('/_next') // exclude Next.js internals
pathname.startsWith('/api') // exclude all API routes
pathname.startsWith('/static') // exclude static files
pathname.includes('.') // exclude all files in the public folder
PUBLIC_FILE.test(pathname)
) {
return NextResponse.next()
}
return I18Middleware(request)
}
Now it works!
Problem: I also used
middleware for i18n and not excluded change paths for _next/image | _next/static folders
export function middleware(request: NextRequest) {
const {pathname} = request.nextUrl
if (
pathname.startsWith('/_next') // exclude Next.js internals
pathname.startsWith('/api') // exclude all API routes
pathname.startsWith('/static') // exclude static files
pathname.includes('.') // exclude all files in the public folder
PUBLIC_FILE.test(pathname)
) {
return NextResponse.next()
}
return I18Middleware(request)
}
Now it works!
6 Replies
so putting stuff in
/public at the very root of the project/public/images/categories/sets.jpg would have the url /images/categories/sets.jpg// You can not import stuff from the public directory, it is not webpacked, not optimized, it is totally outside of your app.
import carouselImage0 from /*THIS DOES NOT WORK*/ '@/public/images/carousel/carousel-slide-0.jpg'
//Instead just use the pre-knowable url that you use for the database.
<img src="/images/carousel/carousel-slide-0.jpg"/>Thrianta
If I use this import carouselImage0 from '@/public/images/carousel/carousel-slide-0.jpg'
<Image
fill
src={carouselImage0.src}
alt="Image"
/>
dont use .src just use the object but you odnt even need to import like that just use the second option, can you paste the full component code, there is likely an issue with the carosel set up as the image should work
this should work by it self , if not try setting the width and height manually
<Image
fill
src="/images/categories/carousel-slide-0.jpg"
alt="Image"
/>
<Image
fill
src={carouselImage0.src}
alt="Image"
/>
dont use .src just use the object but you odnt even need to import like that just use the second option, can you paste the full component code, there is likely an issue with the carosel set up as the image should work
this should work by it self , if not try setting the width and height manually
<Image
fill
src="/images/categories/carousel-slide-0.jpg"
alt="Image"
/>
Cape lionOP
Decision - https://github.com/vercel/next.js/discussions/37609
Problem: I also used
and not excluded change paths for _next/image | _next/static folders
export function middleware(request: NextRequest) {
const {pathname} = request.nextUrl
if (
pathname.startsWith('/_next') // exclude Next.js internals
pathname.startsWith('/api') // exclude all API routes
pathname.startsWith('/static') // exclude static files
pathname.includes('.') // exclude all files in the public folder
PUBLIC_FILE.test(pathname)
) {
return NextResponse.next()
}
return I18Middleware(request)
}
Now it works!
Problem: I also used
middleware for i18n and not excluded change paths for _next/image | _next/static folders
export function middleware(request: NextRequest) {
const {pathname} = request.nextUrl
if (
pathname.startsWith('/_next') // exclude Next.js internals
pathname.startsWith('/api') // exclude all API routes
pathname.startsWith('/static') // exclude static files
pathname.includes('.') // exclude all files in the public folder
PUBLIC_FILE.test(pathname)
) {
return NextResponse.next()
}
return I18Middleware(request)
}
Now it works!
Answer