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

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

  •  1
  • Alberto Muñoz Sánchez  · 技术社区  · 5 年前

    .clsSize {
      width: 100px;
      height: 100px;
    }
    <img src="wrong-path.jpg" class="clsSize" style="width: 100px; height: 100px;" width="100" height="100">
    1 回复  |  直到 5 年前
        1
  •  2
  •   Praveen Kumar Purushothaman Daniel Dewhurst    5 年前

    您需要一点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或服务器端语言的情况下是否可以实现这一点。