Warning: Do not use element. Use 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!

`icons\mint drop.png` -> `icons/mint drop.png` and you should probably also refrain from using file names with whitespaces in it ... — derpirscher, Dec 16 '22 at 08:30

score 3 · Accepted Answer · edited Jan 10 '23 at 12:16

3

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'

edited Jan 10 '23 at 12:16

Donald Duck

8,409
22
75
99

answered Dec 16 '22 at 08:14

Hermann K. EHO

58
1
8

Thx man, with your help i found the solution!!! It is: – toonie Dec 16 '22 at 08:32

Warning: Do not use element. Use from next/image instead

1 Answers1