输入默认图像以防 html <img> 的 src 属性.无效? [英] Inputting a default image in case the src attribute of an html &lt;img&gt; is not valid?

查看:21
本文介绍了输入默认图像以防 html <img> 的 src 属性.无效?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

有没有办法在 HTML <img> 标签中呈现默认图像,以防 src 属性无效(仅使用 HTML)?如果没有,您的轻量级解决方法是什么?

Is there any way to render a default image in an HTML <img> tag, in case the src attribute is invalid (using only HTML)? If not, what would be your lightweight way to work around it?

推荐答案

您要求 仅 HTML 解决方案...

You asked for an HTML only solution...

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">

<head>
  <title>Object Test</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>

<body>

  <p>
    <object data="http://stackoverflow.com/does-not-exist.png" type="image/png">
      <img src="https://cdn.sstatic.net/Img/unified/sprites.svg?v=e5e58ae7df45" alt="Stack Overflow logo and icons and such">
    </object>
  </p>

</body>

</html>

由于第一张图片不存在,后备图片(本网站上使用的精灵*)将显示.如果您使用的是真的不支持object,它将忽略该标签并使用 img 标签.有关兼容性,请参阅 caniuse 网站.该元素被 IE6+ 的所有浏览器广泛支持.

Since the first image doesn't exist, the fallback (the sprites used on this web site*) will display. And if you're using a really old browser that doesn't support object, it will ignore that tag and use the img tag. See caniuse website for compatibility. This element is widely supported by all browsers from IE6+.

* 除非图像的 URL 更改(再次),在这种情况下,您可能会看到替换文字.

这篇关于输入默认图像以防 html <img> 的 src 属性.无效?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆