What does this warning message mean? 'img elements must have an alt prop, either with meaningful text, or an empty string for decorative images'

Question

It means when you create an image in your HTML, you should include an alt attribute for the benefit of screen readers and text browsers.

<img src="url" alt="description of image">

Images should have an alt property. The alternate property comes into picture in several cases like the card not getting downloaded, incompatible browsers, or the image getting corrupt. You need to pass in a prop called alt to the image.

Also, Alt tag is used by screen readers for visually impaired. Therefore it is considered as a good practice to always add a ALT tag to the image component. Accessibility

It means that your <img> tag MUST have an alt attribute on it like so:

<img src="pathToYourImage.extension" alt="My Awesome Image">

In case if the image isn't loaded then the text inside the alt attribute will be shown instead.

I had a similar error with this code.

    <img src={props.contacts.imgUrl}/>

Solution: Notice the alt= position on the image anchor outside the curved parenthesis

    <img src={props.contacts.imgUrl} alt=""/>

I had the same error. Basically, you should not include these words in alt attribute. image or picture, or photo

// avoid using image or picture, or photo


// do
<img src="foo" alt="nice"/>.      // good


// don't
<img src="foo" alt="foo is coming "/>.    // bad