Question

我有spring mvc应用程序

有时在我们的网站上，我们可以看到html存在img标记，但实际上url已被破坏。

现在我们想要显示所有这些情况的默认图像。

我们怎样才能在一个地方处理它，只有当我们想要加载图像时我们才能到达这个地方。

Answer 1

你可以使用jQuery来获取它。在 document.ready 上，您可以检查所有图像的网址，并检查图像是否有效。如果没有，你可以改变你的形象。

这是jQuery代码（您必须在所有页面上添加它）：

$(document).ready(function(){
    var images = $('img').each(function(i, image){
        checkSrc(image);
    });
});

function checkSrc(image){
    $.get($(image).attr('src'), function() {
    //succes, we do nothing
    }).fail(function() {
        $(image).attr('src','https://upload.wikimedia.org/wikipedia/commons/thumb/0/0d/Cristiano_Ajax.jpg/220px-Cristiano_Ajax.jpg');
    });
}

这里是html：

<img src="notexisting.jpg"/>

工作小提琴：http://jsfiddle.net/bx5kkoun/

<强> WARINING

我不建议这样做，因为你必须要求两次图像。您也可以使用 Java Filter 来实现它，但是您必须检查来自服务器的所有图像的URL，但它的情况相同。

Answer 2

这个怎么样：

<img src="image.gif" onerror="loadDefaultImage()">

此解决方案是跨浏览器，但不是IE8 and below.

你有很多loadDefaultImage函数的选项，你可以使用已建议的jQuery方法（只使用失败部分），这里是另一个suggestion，或只是google“image tag onerror example”并选择一个选项这适合你。

我认为在客户端解决它是最有效的方法。如果发生故障，它只会尝试额外的请求。如果您在服务器端尝试解决方案，则必须测试成功/失败，然后修改发送到浏览器的标记。在页面呈现时，浏览器必须再次加载成功的图像。

这是一个可能的实现：

function loadDefaultImage(element) {
  $(element).attr(
    'src',
    'https://placehold.it/100x100'
  );  
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div style="width:100px;margin-right:100px;display:inline-block;">
  <img src="image.gif">
</div>
<div style="display:inline-block;">
  <img src="image.gif" onerror="loadDefaultImage(this)">
</div>

处理无法渲染图像时的处理情况

2 个答案: