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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/43812733/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 02:10:44  来源:igfitidea点击:

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

javascriptreactjs

提问by

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
警告:img 元素必须有一个 alt 属性,或者带有有意义的文本,或者装饰图像 jsx-a11y/img-has-alt 的空字符串

It's showing line number 13 but there is nothing props is using.

它显示第 13 行,但没有使用道具。

采纳答案by Vamshi Gudipati

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.

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

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

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

回答by Barmar

It means when you create an image in your HTML, you should include an altattribute for the benefit of screen readers and text browsers.

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

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

回答by Zahid Saeed

It means that your <img>tag MUSThave an altattribute on it like so:

这意味着您的<img>标签必须具有如下alt属性:

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

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

In case if the image isn't loaded then the text inside the altattribute will be shown instead.

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

回答by Steven

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

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

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

回答by mohamed ibrahim

It means that your image need a description and this is a property in the img tagcalled altso use this as long as you write in JSX & React :

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

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

回答by Niyongabo

I had the same error. Basically, you should not include these words in altattribute. image or picture, or photo

我有同样的错误。基本上,你不应该在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