49

Why am I getting this warning?

warning: img elements must have an alt prop, either with meaningful text, or an empty string for decorative images jsx-a11y/img-has-alt

It's showing line number 13 but there is nothing props is using.

6
  • 3
    define the alt='some value' with img, check the meaning of that: w3schools.com/tags/att_img_alt.asp May 5, 2017 at 19:48
  • alt prop means alt property.
    – mehulmpt
    May 5, 2017 at 19:48
  • it means it needs an alt prop, like <img src="..." alt="...">
    – aw04
    May 5, 2017 at 19:49
  • html.com/attributes/img-alt
    – PM 77-1
    May 5, 2017 at 19:49
  • It is worth noting that screenreaders will likely announce that the object is an image. Including phrases like "picture of..." or "image of..." in the alt attribute may lead to cases of the screenreader saying confusing things like "image of image of".
    – jaunt
    Jun 10, 2020 at 22:17

12 Answers 12

42

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">
6
  • 3
    Just to add more information, if you add description in alt attribute with following keywords "image, photo or picture" react gives following warning - "Redundant alt attribute. Screen-readers already announce img tags as an image. You don’t need to use the words image, photo, or picture (or any specified custom words) in the alt prop jsx-a11y/img-redundant-alt" React version - 16.8.3
    – Rahul Raut
    Mar 6, 2019 at 7:14
  • 1
    something like that would not show the warning <img src="url" alt="for sell">
    – Hunter
    May 24, 2019 at 13:42
  • @Hunter I don't understand your comment. How is that different from what I say in my answer?
    – Barmar
    May 24, 2019 at 16:19
  • 1
    @Barmar because react will throw a warning sign if you include the word "image" in alt
    – Hunter
    May 27, 2019 at 0:17
  • @Hunter I didn't realize you were responding to the other comment.
    – Barmar
    May 28, 2019 at 14:46
22

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

12

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.

9

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

0
7

It means that your image need a description and this is a property in the img tag called alt so use this as long as you write in JSX & React :

<img src={ImageImported} alt="description of image"/>
6

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=""/>
1
  • yes, I also make the alt attribute value empty and the warning goes off. Apr 24, 2020 at 4:22
2

This error means that you haven’t added the "alt" property. This property is mandatory, so you can not ignore it.

To get rid of this error you should set the alt attribute and pass some text there. It's like a description of your photo. This text will be used in cases when your picture is not loaded or when browser couldn't find your image by provided path (src attribute).

<img src="path_to_your_image" alt="alternative_text_of_your_image"/>
1

in the alt attribute do not put the image or Image because those words are reserved for react

1
  • 2
    As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.
    – Community Bot
    Sep 24, 2021 at 18:26
0

Try this one :

<input type="image" img src = {'url'} alt="photo" />

(I have used `` not the single quotation marks for the url)

0

I had this an error when using ESLint in React for this:

<img src={frontDefault} />

Add this

alt=''

This is how it must be for it to work

<img src={frontDefault} alt='' />
0

In my case, this error was inside the REACT, and it happened because it was like this, <img src={{RedLed} } style={{width:'50px'}}/>, that way I was giving this error. The error was that I put two braces around the img call and I only needed one brace like that, <img src={RedLed} style={{width:'50px'}}/>

0

The element includes the alt property, which will prevent the image from having any alternate text,`

1
  • 1
    Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.
    – Amit
    May 2, 2022 at 12:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.