Javascript - 用文本替换损坏的图像(div；css 类)

Question

我正在尝试用 JS 替换所有损坏的图像。我使用此代码将所有损坏的图像替换为 notfound.png 图像。

    $(document).ready(function() {
    $('img').attr('onError', 'this.src="notfound.png"');
});

无论如何，我想用文字通知代替图片来代替它们。我找不到正确的方法，非常感谢您的帮助。 JS 不是我的菜:(

我想将其用于文本部分:

文本显示...

编辑:好的，我发现这个解决方案工作正常，但不接受 CSS 类

<script type="text/javascript">
$(document).ready(function() {
$('.post_body img').one('error', function() {
$(this).replaceWith('<div>Image not found (error 404)</div>').addClass('error404');
});
});
</script>

反正我写的CSS类没有添加，所以这个解决方案是不完整的:(

CSS 将是:

.error404 {
   display: block;
   color: #667d99;
   font-weight: bold;
   font-size: 11px;
   border: 1px dotted;
   border-radius: 3px;
   padding: 5px;
   margin: 10px;
   background: #e7edf3;
   text-aling: center;
}

Answer 1

好的，我想我已经为您找到了解决方案。我尝试使用 jQuery error功能。这个帮助了我:

To replace all the missing images with another, you can update the src attribute inside the callback passed to .error(). Be sure that the replacement image exists; otherwise the error event will be triggered indefinitely.

在您的示例中，这将是最好的:

$('img').each(function() {
    var img = $(this);

    img.error(function() {
        img.replaceWith('<div class="error404">Image not found (error 404)</div>');
    }).attr('src', img.attr('src'));
});

我还做了一个jsFiddle example对你来说，这对我来说非常有用。