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>
);
}
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>
);
}
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
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
/>
// Example external source
module.exports = {
images: {
domains: ['example.com'],
},
}
<Image
src="https://example.com/image1.png"
// ...
/>