I Can't Reference an Image in Next.Js

I can't reference an image in Next.js

/public/favicon/mail.png

=> "/favicon/mail.png" will work

How to display an Image with next.js?

assets directory and all static (images, icons, fonts, robot.txt...) stuff should be inside the public folder to be accessible.

Relevant docs.

Nextjs: Unable to load images from static folder

from the docs:

Next.js can serve static files, like images, under a folder called
public in the root directory. Files inside public can then be
referenced by your code starting from the base URL (/).

So, first add an image to public/my-image.png and then you can reference it:

<img src="/my-image.png" />

I think next.js will have a watch on this directory so you won't need to restart your server every time you put something in there.

Can't display Image in Image tag while using Next.js and material UI

To load static images, first import the file. E.g
import ProfileSvg from "/images/Profile.svg"

Then in your image.

<Image
        src={ProfileSvg}
        alt={"Thumbnail-alt"}
        width={300}
        height={160}
        style={{ background: "#252525e6", borderRadius: "6px" }}
      />

Nextjs Image component does not work with external URL of image source

Restart the nextjs server each time you change the config file, next.config.js.

Cannot import image in NextJs project

Changed the import FeaturesBg from '/images/features-bg.png' to const FeaturesBg = '/images/features-bg.png' and nextjs relative /public static imports worked.

New NextJS project not displaying images

you must put image in Public folder and in Src img write "/logo.png"

if you work on Nextjs , stady Image/Next

---

Related Topics