Warning: Do not use <img> element. Use <Image /> from next/image instead

Question

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!

Answer 1

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'