how can i display an image wit nextjs

Question

am trying to insert an image in my main component everything is working fine, my alt atribute is displaying but the image in not displaying on the browser. please what am i doing wrong

import port from "../public/port.png";

export default function Main() {
return (
    <section className="">
        <div className="">
            <img src={port} alt="illustration" />
        </div>
    </section>
);
}

You could try Next.js' [image component](https://nextjs.org/docs/api-reference/next/image), or you can simply use the relative path to the image. — kelsny, Feb 25 '22 at 00:53
you used width and height for image ? if worked this is not good , you must use Image-Nextjs . When use Nextjs — H9ee, Feb 25 '22 at 07:59
if your path is true, you have to use width and height attributes. — gungor, Feb 25 '22 at 08:43

score 0 · Answer 1 · answered Feb 25 '22 at 08:41

if your file exist in public folder, then you dont have to import it. it is accessible globally.

export default function Main() {
return (
    <section className="">
        <div className="">
            <img src="/port.png" alt="illustration" />
        </div>
    </section>
);
}

score 0 · Answer 2 · answered Feb 25 '22 at 09:13

Use image tag

<img src="/public/port.png" alt="your alt">

next/image has been introduced since v.10.0.0. You can use either

Statically imported

import port from "../public/port.png";

<Image
   src={port}
   alt="your alt"
   // width={500} automatically provided
   // height={500} automatically provided
   // blurDataURL="data:..." automatically provided
   // placeholder="blur" // Optional blur-up while loading
/>

Path string (internal URL | external URL)

// Example external source
module.exports = {
  images: {
    domains: ['example.com'],
  },
}

<Image
  src="https://example.com/image1.png"
  // ...
/>

how can i display an image wit nextjs

2 Answers2