是否有任何方法在HTML <img>标记中呈现默认图像,以防src属性无效(仅使用HTML)?如果不是,你会用什么轻量级的方式来解决这个问题?


当前回答

如果你已经创建了动态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">

其他回答

只有HTML的解决方案,其中唯一的要求是你知道你插入的图像的大小。将不工作于透明图像,因为它使用背景图像作为填充。

我们可以成功地使用background-image来链接给定图像缺失时出现的图像。然后唯一的问题是破碎的图标图像-我们可以通过插入一个非常大的空字符来删除它,从而将内容推到img的显示之外。

img { 背景图片:url(“http://placehold.it/200x200”); 溢出:隐藏; } img:{之前 内容:“”; 字体大小:1000 px; } 这张图片缺失了: <img src="a.jpg" style="width: 200px;身高:200 px " / > < br / > 并且正在显示占位符


只有CSS的解决方案(只有Webkit)

img:{之前 内容:“”; 字体大小:1000 px; 背景图片:url(“http://placehold.it/200x200”); 显示:块; 宽度:200 px; 身高:200 px; 位置:相对; z - index: 0; margin-bottom: -16 px; } 这张照片就在那里: < img src = " http://placehold.it/100x100 " / > < br / > 这张图片缺失了: < img src = " a.jpg " / > < br / > 并且正在显示占位符

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="..." />

对于任何图像,只需使用以下javascript代码:

if (ptImage.naturalWidth == 0)
    ptImage.src = '../../../../icons/blank.png';

其中ptImage是由document.getElementById()获得的<img>标记地址。

在Spring in Action第三版中找到了这个解决方案。

<img src=“../资源/images/Image1.jpg”

更新: 这不是一个只有HTML的解决方案…Onerror是javascript

如果你已经创建了动态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">