图片无法找到/加载失败时如何自动显示占位图的实现咨询

共有两种常用实现方式，可根据你的业务场景选择：

方案1：HTML img标签自带onerror属性处理（推荐，改动量最小） #

不需要修改你现有的路径判断逻辑，直接在渲染图片的标签上添加错误回调即可，当图片加载失败时会自动替换为占位图：

<!-- 记得替换下方占位图路径为你的实际路径，添加this.onerror=null避免占位图加载失败触发死循环 -->
<img src="{$img}" alt="图片描述" onerror="this.onerror=null; this.src='img/hosts/placeholder.png';">

如果页面内有大量图片需要统一处理，也可以全局绑定监听事件，不用逐个给img加属性：

document.addEventListener('error', function(e) {
  if (e.target.tagName.toLowerCase() === 'img') {
    e.target.src = 'img/hosts/placeholder.png';
    e.target.onerror = null;
  }
}, true);

方案2：JS预校验图片路径有效性 #

如果你需要在渲染页面之前就确定图片是否存在、提前处理路径，可以先写一个图片存在性校验函数，路径判断完成后先校验再输出最终路径：

// 图片路径有效性校验函数
function checkImgAvailable(url) {
  return new Promise((resolve) => {
    const tempImg = new Image();
    tempImg.onload = () => resolve(true);
    tempImg.onerror = () => resolve(false);
    tempImg.src = url;
  })
}

// 你原有路径判断逻辑
let $img = '';
if ($d == 1 && $h >= 1 && $h < 14) $img = 'img/hosts/monophy.png';
else if ($d == 1 && $h >= 14 && $h < 16) $img = 'img/hosts/mon24.jpg';
else if ($d == 1 && $h >= 16 && $h < 18) $img = 'img/hosts/mon46.jpg';
else if ($d == 1 && $h >= 18 && $h < 20) $img = 'img/hosts/mon68.jpg';
else if ($d == 1 && $h >= 20 && $h < 22) $img = 'img/hosts/mon810.jpg';
else if ($d == 1 && $h >= 22 && $h < 24) $img = 'img/hosts/MON1012.png';
else if ($d == 1 && $h >= 19) $img = 'img/hosts/monophy.png';
else if ($d == 2 && $h < 0) $img = 'img/hosts/monophy.png';

// 校验后生成最终图片路径
const PLACEHOLDER_IMG = 'img/hosts/placeholder.png';
const finalImg = await checkImgAvailable($img) ? $img : PLACEHOLDER_IMG;

两种方案对比 #

• 方案1性能开销更低、代码改动量最小，适配后续新增的所有图片路径，适合绝大多数常规场景
• 方案2适合需要提前感知图片加载结果、提前上报错误路径的特殊场景，会额外发起一次资源请求，性能开销略高

内容的提问来源于stack exchange，提问作者Niall O'Boyle