是否有任何方法在HTML <img>标记中呈现默认图像,以防src属性无效(仅使用HTML)?如果不是,你会用什么轻量级的方式来解决这个问题?
当前回答
没有办法确定无数的客户端(浏览器)将试图查看您的页面。需要考虑的一个方面是,电子邮件客户端实际上是web浏览器,可能无法处理这种诡计……
因此,你也应该包括一个alt/文本的默认宽度和高度,就像这样。这是一个纯HTML解决方案。
alt="NO IMAGE" width="800" height="350"
所以另一个好的答案可以修改如下:
<img src="foo.jpg" onerror="if (this.src != 'error.jpg') this.src = 'error.jpg';" alt="NO IMAGE" width="800" height="350">
我在Chrome中有对象标签的问题,但我想这也适用于此。
你可以进一步样式的alt/文本非常大…
所以我的答案是使用Javascript和一个不错的alt/text回退。
我还发现这个很有趣:如何设置图像的alt属性
其他回答
<img style=“background-image: url(image1), url(image2);”></img>
使用背景图像,让您可以添加多个图像。 我的情况: Image1是主图像,这将从某个地方获取(浏览器执行请求) Image2是加载image1时显示的默认本地图像。 如果image1返回任何类型的错误,用户将看不到任何更改,这对于用户体验来说是干净的
JQuery的可模块化版本,在文件末尾添加:
<script>
$(function() {
$('img[data-src-error]').error(function() {
var o = $(this);
var errorSrc = o.attr('data-src-error');
if (o.attr('src') != errorSrc) {
o.attr('src', errorSrc);
}
});
});
</script>
在你的img标签上:
<img src="..." data-src-error="..." />
除了Patrick的精彩回答,对于那些正在寻找跨平台angular js解决方案的人来说,你可以看看:
<object type="image/png" data-ng-attr-data="{{ url || 'data:' }}">
<!-- any html as a fallback -->
</object>
这是一个我试图找到正确解决方案的页面:http://plnkr.co/edit/nL6FQ6kMK33NJeW8DVDY?p=preview
使用Jquery,你可以这样做:
$(document).ready(function() {
if ($("img").attr("src") != null)
{
if ($("img").attr("src").toString() == "")
{
$("img").attr("src", "images/default.jpg");
}
}
else
{
$("img").attr("src", "images/default.jpg");
}
});
如果你已经创建了动态Web项目,并将所需的图像放置在WebContent中,那么你可以通过使用下面提到的Spring MVC中的代码来访问图像:
<img src="Refresh.png" alt="Refresh" height="50" width="50">
你也可以创建名为img的文件夹,并将图像放在img文件夹中,然后将img文件夹放在WebContent中,然后你可以使用下面提到的代码访问图像:
<img src="img/Refresh.png" alt="Refresh" height="50" width="50">
推荐文章
- 使伸缩项目正确浮动
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何触发自动填充在谷歌Chrome?
- 创建圈div比使用图像更容易的方法?
- 为什么Chrome浏览器不正确地确定页面是在不同的语言,并提供翻译?
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度,而不是整个元素的宽度,使用CSS?
- 如何删除和清除所有的本地存储数据
- 强制打开“另存为…”弹出打开文本链接点击PDF在HTML
- 如何修改标签文本?
- 在HTML中还有其他有用的空格码吗,比如半空格的 , em-spaces, en-spaces等等?
- 输入触发器按钮单击