显示备份映像中的html

当浏览器是不能够处理字体包specialFont，下面的代码自动切换的字体basicFont：显示备份映像中的html

<p style="font-family:'specialFont', basicFont"> Hello world! </p>

是一样可能的图像？我有一个通常需要显示的svg图像，以及不支持svg的浏览器的备份png（如某些移动浏览器）。

来源

2013-10-24 Doubt

http://stackoverflow.com/questions/980855/inputting-a-default-image-in-case-the-src-arribute-of-an-html-img-is-not-valid – ajc

这个问题不是关于丢失图像的回退，而是关于*不支持的图像格式*的回退。 –

我不认为这是有可能这样的，但这里有一个很好的&快速的解决方案：http://css-tricks.com/svg-fallbacks/

来源

2013-10-24 18:10:55

您可以使用onerror事件填补了国内空白。搭配jQuery或类似的错误事件我们可以提供默认图像。欲了解更多，我有一个post。

来源

2013-10-24 18:15:07

一个简单的场景是在其内部使用object元素与另一个object元素（指的是例如PNG文件），即作为回退内容。虽然这似乎在Android 2上运行良好，但IE 8和老版本却对此感到困惑。所以，我认为，我们需要用丑“IE pseudocomments”来处理它们（又名“有条件的意见”。）：

<!--[if (IE 9)|!(IE)]><!--> 
    <object data=logo.svg type=image/svg+xml width=50 height=50> 
    <object data=logo.png type=image/png width=50 height=50> 
     <span class=logo>ACME</span> 
    </object> 
    </object> 
<!-- <![endif]--> 
<!--[if lte IE 8]> 
    <img src=logo.png alt=ACME> 
<![endif]-->

来源

2013-10-24 19:20:15

对象元素是不好的，因为它们加载所有图像，即使没有必要的。一个简单的img元素不是很灵活，所以我把它与一个图片元素结合起来。这种方式不需要CSS。当发生错误时，所有srcset被设置为后备版本。一个断开的链接图像没有显示出来。图片元素支持对浏览器不支持的类型进行响应式设计和多种回退。

<picture> 
    <source id="s1" srcset="portrait_version.svg" type="image/svg+xml" media="orientation: portrait"> 
    <source id="s2" srcset="landscape_version.svg" type="image/svg+xml"> 
    <img src="fallback.png" alt="" onerror="this.onerror=null;document.getElementById('s1').srcset=document.getElementById('s2').srcset=this.src;"> 
</picture>

来源

2017-03-10 18:05:11 bapho

显示备份映像中的html

回答

相关问题