Next.js Discord

Discord Forum

load image using the environment variables

Answered
Dogue Brasileiro posted this in #help-forum
Open in Discord
Avatar
Dogue BrasileiroOP
How do i load image using the environment variables?

import Image from "next/image";
import Logo from "@/public/logo.svg"; //<--- i want to load this from environment variable

...
 return ( <Image src={Logo} alt="logo" width={200} height={40} />)
Answered by Hassib
Hi, I believe it won't work to do so. The image should be imported if it's not in the public directory. If it's in the public, then you don't have to import it, you can use it like this:

<Image
  src="/img/logo.svg"
  // props
/>


When you use a slash, it will read the path from the public directory.
View full answer

3 Replies

Avatar
Hassib
Hi, I believe it won't work to do so. The image should be imported if it's not in the public directory. If it's in the public, then you don't have to import it, you can use it like this:

<Image
  src="/img/logo.svg"
  // props
/>


When you use a slash, it will read the path from the public directory.
Answer
Avatar
Dogue BrasileiroOP
oh i thought all local images should be imported to use
Avatar
Hassib
If it's worked, please mark the solution, thanks