这个警告信息是什么意思？'img元素必须有一个alt prop,要么是有意义的文本,要么是空字符串用于装饰图像'

Question

为什么我收到这个警告？

警告:img元素必须有一个alt prop,要么是有意义的文本,要么是空字符串用于装饰图像jsx-a11y/img-has-alt

它显示第13行,但没有任何道具使用.

Answer 1

这意味着当您在HTML中创建图像时,应该包含一个alt属性,以使屏幕阅读器和文本浏览器受益.

<img src="url" alt="description of image">

Answer 2

图像应具有alt属性.备用属性在几种情况下出现,例如卡未下载,浏览器不兼容或图像损坏.您需要将名为alt的道具传递给图像.

此外,屏幕阅读器使用Alt标签来识别视障人士.因此,始终将ALT标记添加到图像组件是一种很好的做法. 无障碍

Answer 3

我有同样的错误。基本上，您不应该在alt属性中包含这些词。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

Answer 4

这意味着您的<img>标记必须在其alt上具有如下属性：

<img src="pathToYourImage.extension" alt="My Awesome Image">

如果未加载图像，alt则将显示属性内的文本。

Answer 5

我对这段代码有类似的错误。

    <img src={props.contacts.imgUrl}/>

解决方案：注意弯曲括号外的图像锚上的 alt= 位置

    <img src={props.contacts.imgUrl} alt=""/>

Answer 6

这意味着你的图像需要一个描述，这是img 标签中名为alt的属性，所以只要你在 JSX 和 React 中编写就使用它：

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