"Redundant alt attribute. Screen-readers already announce `img` tags as an image." Code ERROR

user_14369732 0
Viewed 6091

I typed <img src= {'https://robohash.org/${id}?size=300x300'}alt="photo" /> on my React js file, after I saved the file and I got an error message on GitBash saying ,

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

Then I removed the alt from the code, and I got the error message saying,

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

How can I fix this problem?

reactjs compiler-warnings
5 Answers

<img src= {'https://robohash.org/${id}?size=300x300'}alt="something" />

'something' diffrent from the words 'photo' and 'image' (or any specified custom words).

user_140652870

I tried this one and it worked:

<input type="image" img src = {'https://robohash.org/${id}?size=300x300'} alt="photo" />

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

user_143697320

I have same error issues in my react app. You can try this following codes.

❌ not work

<img src={`https://robohash.org/${id}?size=300x300`} alt="photo" />

It's also not work.

<img src={`https://robohash.org/${id}?size=300x300`} alt="Photo by John Doe" />

Don't use alt that contain keywords : photo, image, or picture.

✅ work

For example: (change alt tag with some image description without keyword)

<img src={`https://robohash.org/${id}?size=300x300`} alt="cutest kitten" />

Maybe, empty alt is alternative option.

✅ work

<img src={`https://robohash.org/${id}?size=300x300`} alt="" />

Thanks.

user_110544200

it's actually saying that inside your alt you don't need to use words like image, photo, or picture.

Example:

instead of

<img src="#" alt="photo"/>

try this :

<img src="#" alt="souvenir"/>

I put souvenir as an alt but you can choose any others words that describe well your image

user_196163940

Try this:

Change alt="photo" to alt={"photo"}

Example: <img src="{picture}" alt={"Card Image"}>

user_155066330
Related