how can i display an image wit nextjs [duplicate]

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, or you can simply use the relative path to the image. — k.tten
– k.tten, Commented Feb 25, 2022 at 0:53
you used width and height for image ? if worked this is not good , you must use Image-Nextjs . When use Nextjs — H9ee
– H9ee, Commented Feb 25, 2022 at 7:59
if your path is true, you have to use width and height attributes. — gungor
– gungor, Commented Feb 25, 2022 at 8:43

Rohit · Accepted Answer · 2022-02-25 08:41:05Z

0

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>
);
}

answered Feb 25, 2022 at 8:41

Rohit

163 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

nart · Accepted Answer · 2022-02-25 09:13:55Z

0

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"
  // ...
/>

answered Feb 25, 2022 at 9:13

nart

1,8782 gold badges15 silver badges26 bronze badges

Collectives™ on Stack Overflow

how can i display an image wit nextjs [duplicate]

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related