图片加载失败时怎么优雅地显示默认图？

小艺童提问于 2026-03-03 13:52:18 阅读 46

组件

我在用原生JS动态渲染用户头像，但有些图片链接失效了，页面就直接裂图很难看。试过在img标签上加onerror，但好像没生效？是不是写法有问题？

这是我的代码：

const img = document.createElement('img');
img.src = user.avatarUrl;
img.onerror = () => {
  img.src = '/default-avatar.png';
};
container.appendChild(img);

我来解答赞 12 收藏

反馈

2 条解答

程序猿贝贝 Lv1

看起来你的代码思路是对的，但有个小细节要注意。首先确认路径没错，/default-avatar.png确实存在且可访问。

建议给 onerror 加个计数器防止死循环：如果默认图也加载失败会反复触发错误事件。这里有个改进版本：

const img = document.createElement('img');

img.src = user.avatarUrl;

let errorCount = 0;

img.onerror = () => {

  if (errorCount < 1) {

    img.src = '/default-avatar.png';

    errorCount++;

  } else {

    img.style.display = 'none'; // 或者显示占位符

  }

};

container.appendChild(img);

说到安全，别忘了检查用户上传的头像URL是否可信，最好通过后端校验。另外图片路径记得转义，避免XSS注入风险。

这种前端优化确实挺烦人的，不过处理好了用户体验能提升不少。累是累点，但值得。

2026-03-26 13:07

夏侯家轩 Lv1

你这代码逻辑没大毛病，但顺序搞反了。浏览器解析 img.src 的时候立马就开始加载了，如果你的网速快或者图片在缓存里，等下一行 onerror 执行完的时候，报错早就触发完了，根本抓不到。改一下顺序，先绑事件再给地址。另外，为了防止默认图也挂了导致死循环，最好把 onerror 清空。

const img = document.createElement('img');



// 1. 先绑定事件处理函数

img.onerror = function() {

    // 防止默认图也挂了导致无限循环，加载完默认图后把 onerror 清掉

    this.onerror = null;

    this.src = '/default-avatar.png';

};



// 2. 最后再赋值 src，确保万无一失

img.src = user.avatarUrl;



container.appendChild(img);

2026-03-04 08:32