reactjs “多余的alt属性,屏幕阅读器已经将'img'标记声明为图像,”代码错误

mccptt67  于 2023-02-03  发布在  React
关注(0)|答案(7)|浏览(242)

我在我的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
如何解决此问题?

wqsoz72f

wqsoz72f1#

〈img源代码={'https://robohash.org/ ${id}?大小= 300 x300'} alt=“一些东西”/〉
“某物”不同于单词“照片”和“图像”(或任何指定的自定义单词)。

zbdgwd5y

zbdgwd5y2#

我试过这个,很管用:
<input type="image" img src = {'https://robohash.org/${id}?size=300x300'} alt="photo" />
(我在网址中使用了''而不是单引号)

dwbf0jvd

dwbf0jvd3#

它实际上是说在alt里面你不需要使用像imagephoto,或者picture这样的词。
示例:
代替

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

试试这个:

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

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

shyt4zoc

shyt4zoc4#

我有同样的错误问题,在我的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:photoimagepicture

例如:(使用一些没有关键字的图像描述更改alt标签)

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

也许,空alt是替代选项。

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

谢谢。

0g0grzrc

0g0grzrc5#

声明一个关键字,如

let alText = 'photo'

并使用

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

qacovj5a6#

从这到

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

这-〉

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

此处我们必须更改除image、photo或picture以外的alt标记值

wtlkbnrh

wtlkbnrh7#

试试这个:
alt="photo"更改为alt={"photo"}
示例:<img src="{picture}" alt={"Card Image"}>

相关问题