Local image imports
Answered
Transvaal lion posted this in #help-forum
Transvaal lionOP
I'm trying to import images locally with
Code (produces the error
import from syntax to use with next/image. The [docs](https://nextjs.org/docs/app/getting-started/images-and-fonts#local-images) state this can be done with images in /public, but I'm not able to get this working myself. I also see other sources saying this can't be done with images in /public, and instead should be passed as strings to src="" from a folder like /app/assets but I'm hesitant to believe this is an error/oversight in next's official documentation (more likely I'm just missing something)Code (produces the error
Module not found: Can't resolve '/foo.jpg'):import Image from "next/image";
import foo from "/foo.jpg";
export default function Page() {
return (
<Image src={foo} alt="foo" />
);
}Answered by joulev
It’s a file import not a url path. So not import from "/foo.png", but import from "../../../public/foo.png" for example.
That means (1) you can use absolute path import like import "@/assets/foo.png" and (2) the image doesn’t have to be in the public folder
That means (1) you can use absolute path import like import "@/assets/foo.png" and (2) the image doesn’t have to be in the public folder
4 Replies
@Transvaal lion I'm trying to import images locally with `import from` syntax to use with `next/image`. The [docs](https://nextjs.org/docs/app/getting-started/images-and-fonts#local-images) state this can be done with images in `/public`, but I'm not able to get this working myself. I also see other sources saying this can't be done with images in `/public`, and instead should be passed as strings to `src=""` from a folder like `/app/assets` but I'm hesitant to believe this is an error/oversight in next's official documentation (more likely I'm just missing something)
Code (produces the error `Module not found: Can't resolve '/foo.jpg'`):
ts
import Image from "next/image";
import foo from "/foo.jpg";
export default function Page() {
return (
<Image src={foo} alt="foo" />
);
}
It’s a file import not a url path. So not import from "/foo.png", but import from "../../../public/foo.png" for example.
That means (1) you can use absolute path import like import "@/assets/foo.png" and (2) the image doesn’t have to be in the public folder
That means (1) you can use absolute path import like import "@/assets/foo.png" and (2) the image doesn’t have to be in the public folder
Answer
@joulev It’s a file import not a url path. So not import from "/foo.png", but import from "../../../public/foo.png" for example.
That means (1) you can use absolute path import like import "@/assets/foo.png" and (2) the image doesn’t have to be in the public folder
Transvaal lionOP
quick follow up, is it more common practice to keep /public in root-level or within /app? since the latter i could just do
@/public as opposed to @/../public?@Transvaal lion quick follow up, is it more common practice to keep /public in root-level or within /app? since the latter i could just do `@/public` as opposed to `@/../public`?
if you want use the public folder, you must put it at the root level.
but you dont need the public folder if you just need to import the images. you can put the images in the same place where they are imported
but you dont need the public folder if you just need to import the images. you can put the images in the same place where they are imported
app/whatever/
photo.jpg
page.tsximport photo from "./photo.jpg"Transvaal lionOP
ok thanks for the help!