“冗余 alt 属性。屏幕阅读器已经将 `img` 标签宣布为图像。”代码错误

Question

我在我的 React js 文件中输入了

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

， 保存文件后，我在 GitBash 上收到一条错误消息，说，

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

然后我从代码中删除了

alt

，我得到了错误消息，

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

我该如何解决这个问题？

Answer 1

“某物”与“照片”和“图像”（或任何指定的自定义词）不同。

Answer 2

我试过这个并且有效：

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

（我使用了 `` 而不是 url 的单引号）

Answer 3

我的 React 应用程序中有同样的错误问题。您可以尝试以下代码。

---

❌ 不工作

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

也不行。

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

不要使用包含关键字的 alt：

photo

、

image

或

picture

.

---

✅工作

例如：（用一些没有关键字的图像描述更改alt标签）

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

---

也许，空 alt 是替代选项。

✅工作

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

谢谢。

Answer 4

实际上是说在您的 alt 中您不需要使用像 image、photo 或 picture 这样的词。

例子：

代替

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

试试这个：

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

我把纪念品作为替代品，但你可以选择任何其他能很好地描述你的形象的词

Answer 5

像这样声明一个关键字

let alText = 'photo'

和使用

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

Answer 6

从这里到

<img className="card-img" src={'https://www.shutterstock.com/'} alt="Card image" />

这个->

<img className="card-img" src={'https://www.shutterstock.com/'} alt="" />

这里我们必须更改图像，照片或图片以外的alt标签值

Answer 7

试试这个：

将

alt="photo"

更改为

alt={"photo"}

例子：

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