CODEWITHSUNDEEP
javascriptreactjs
user7904085
user7904085

Reputation:

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

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.

Upvotes: 49

Views: 141638

Answers (12)

Biodunijelu
Biodunijelu

Reputation: 11

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

Upvotes: 0

dyvopes
dyvopes

Reputation: 141

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"/>

Upvotes: 2

conceito zero
conceito zero

Reputation: 1

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'}}/>

Upvotes: 0

Kerwin Joel sandoval sanchez
Kerwin Joel sandoval sanchez

Reputation: 11

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

Upvotes: 1

Leketo
Leketo

Reputation: 131

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='' />

Upvotes: 0

Anu
Anu

Reputation: 193

Try this one :

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

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

Upvotes: 0

mohamed ibrahim
mohamed ibrahim

Reputation: 583

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"/>

Upvotes: 7

Agent
Agent

Reputation: 1395

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

Upvotes: 9

Steven
Steven

Reputation: 1177

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=""/>

Upvotes: 6

Brr Switch
Brr Switch

Reputation: 984

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

Upvotes: 22

Zahid Saeed
Zahid Saeed

Reputation: 1181

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.

Upvotes: 12

Barmar
Barmar

Reputation: 782130

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">

Upvotes: 43

Related Questions