My Code:
<img src={`icons/mint drop.png`} alt="drop" />
<hr className={`${styles.smallDivider} ${styles.detailPageHr}`} />
<p className={styles.selectBoxDescription}>
Creator Finnez: <b></b>
<p className={styles.selectBoxDescription}>
Genius artist, will bring you to the next level.
</p>
</p>
Gives me a warning: Warning: Do not use <img>
element. Use <Image />
from next/image
instead. See: https://nextjs.org/docs/messages/no-img-element @next/next/no-img-element
I tryed the solution from the next.js docs:
<picture>
<source src="icons\mint drop.png" type="image/png" />
<img
src="icons\mint drop.png"
alt="drop"/>
</picture>
But it doesnt works! It doesnt show me the image, i can see only "drop" but no image!
CodePudding user response:
It's because nextjs
recommended to Use next/image
to improve performance with automatic Image Optimization.
Turn your image into:
<picture>
<source src="public\icons\mint drop.png" type="image/png" />
<Image
src="public\icons\mint drop.png"
alt="drop"/>
</picture>
Make sure to import Image before.
import Image from 'next/image'