代码之家 › 专栏 › 技术社区 › Alberto Muñoz Sánchez

如果路径错误,请保持图像大小

image css html

1

Alberto Muñoz Sánchez · 技术社区 · 7 年前

.clsSize {
  width: 100px;
  height: 100px;
}

<img src="wrong-path.jpg" class="clsSize" style="width: 100px; height: 100px;" width="100" height="100">

1 回复 | 直到 7 年前

1

2

Praveen Kumar Purushothaman 7 年前

您需要一点JavaScript来实现这一点。图像触发了一个名为 onError 当图像无法加载时,您可以使用它。我认为这应该只在HTTP协议上使用,但在文件协议上可能有效,也可能无效。

使用jQuery时,代码如下所示:

$(document).ready(function () {
  $('img').error(function () {
    $(this).attr('src', 'missing.png');
  });
});

在香草JavaScript中,它是:

var imgs = document.getElementsByTagName("img");
for (var i = 0; i < imgs.length; i++)
  imgs[0].onerror = function () {
    this.src = "missing.png";
  };

工作片段

$(function () {
  $('img').error(function () {
    $(this).attr({
      'src': 'https://i.imgur.com/9q6NxKo.png',
      "width": 100
    });
  });
});

<script src="//code.jquery.com/jquery-2.2.4.min.js"></script>
<img src="hello.png" />

Handling Broken Image Links in a Better Way .

我不确定在没有JavaScript或服务器端语言的情况下是否可以实现这一点。