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!

icons\mint drop.png -> icons/mint drop.png and you should probably also refrain from using file names with whitespaces in it ... — derpirscher
– derpirscher, Commented Dec 16, 2022 at 8:30

Donald Duck is with Ukraine · Accepted Answer · 2023-01-10 12:16:24Z

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, 2023 at 12:16

Donald Duck is with Ukraine

9,00223 gold badges82 silver badges106 bronze badges

answered Dec 16, 2022 at 8:14

Hermann K. EHO

981 silver badge8 bronze badges

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

1 Comment

toonie Over a year ago

Thx man, with your help i found the solution!!! It is: <Image src="/icons/mint drop.png" alt="Landscape picture" width={220} height={220} />

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related