0

如果图片无法显示，有没有办法添加单独的替代文本（例如“图片 1/2 不可用”）？如何更改此代码以允许这种情况发生？

（Sridhar 的代码）

<script type = "text/javascript">
        function pic1()
        {
            document.getElementById("img").src = "picture 1 source";
        }
        function pic2()
        {
            document.getElementById("img").src ="picture 2 source";
        } 
</script>

<img src = "" id = "img"/> <input type="button" value="Show Picture
    1" onclick="pic1()"/> <input type="button" value="Show Picture 2"
    onclick="pic2()"/>
4

2 回答 2

4

如果图片无法显示，有没有办法添加单独的替代文本（例如“图片 1/2 不可用”）？

是的，这就是该alt属性的用途——无论如何，它实际上是图像的必需属性。

您可以.alt像这样设置图像的 alt 标签：

var image = document.getElementById("img");
image.src = "Image src here"
image.alt = "Image alt here - if image failed to render, you will see this!"

假设你必须通过 JavaScript 来做。大多数人只是简单地将其包含在 HTML 本身中：

<img src = "" id = "img" alt="Alternative text here!"/>

在此处查看有关该alt属性的更多信息。

编辑：您可以考虑使用onerror关于 Derek 的观点：

“当根本找不到渲染图像或找不到图像时，onerror 允许使用不同的 alt 文本”

于 2013-05-16T09:08:34.720 回答
3

是的，有办法。将onerror属性与错误文本或备用图像的路径一起使用。

<img onerror="this.src='/path/to/alternate/img.jpg'" src="/your/img.jpg">

或者

<img onerror="this.alt='picture 1/2 not available'" src="/your/img.jpg">

编辑： 当然alt，正如 Zenith 指出的那样，您应该在每张图像上使用（必需）属性。使用onerror假设您想在找不到图像时向用户显示不同的东西，而不是说，用户正在使用屏幕阅读器或以其他方式选择禁用图像。alt一种替代方法是显示附加了“不可用”消息的原始文本：

<img alt="picture 1/2" onerror="this.alt=this.alt+': not available'" src="/your/img.jpg">

演示

于 2013-05-16T09:09:09.890 回答