开发Handlebars助手：判断图片加载状态并替换失效图片

我之前也碰到过一模一样的需求，给你分享一个能正常工作的Handlebars助手实现思路，应该能解决你遇到的问题：

首先得明确：图片加载是浏览器端的异步操作，Handlebars助手是在模板渲染阶段同步执行的，没法直接在助手内部等待图片加载完成再返回结果。所以正确的做法是把“加载失败替换”的逻辑交给浏览器的onerror事件来处理，而不是在助手里面同步判断状态。

1. 注册Handlebars助手 #

在你的JS代码里注册这个助手，它会生成带有错误处理的<img>标签：

Handlebars.registerHelper('imageWithFallback', function(imgSrc, fallbackSrc, altText) {
  // 使用Handlebars.SafeString避免HTML被转义
  return new Handlebars.SafeString(`
    <img 
      src="${imgSrc}" 
      alt="${altText || 'Placeholder image'}" 
      onerror="this.src='${fallbackSrc}'"
      style="width: 100%; height: auto;" <!-- 可选：添加基础样式 -->
    >
  `);
});

2. 在模板中使用助手 #

在你的Handlebars模板里直接调用这个助手，传入目标图片地址、备用图片地址和替代文本：

{{imageWithFallback product.imageUrl "/assets/images/fallback-product.jpg" "Product thumbnail"}}

3. 进阶优化（避免内联事件） #

如果你不想用内联的onerror事件（比如遵循内容与行为分离的原则），可以改成动态绑定事件的方式（仅适用于客户端渲染场景）：

Handlebars.registerHelper('imageWithFallback', function(imgSrc, fallbackSrc, altText) {
  const imgElement = document.createElement('img');
  imgElement.src = imgSrc;
  imgElement.alt = altText || 'Placeholder image';
  
  imgElement.addEventListener('error', function() {
    this.src = fallbackSrc;
    console.log(`Failed to load ${imgSrc}, switched to fallback`);
  });

  return new Handlebars.SafeString(imgElement.outerHTML);
});

如果你的助手是试图在渲染时同步判断图片是否加载成功，那肯定行不通——因为此时图片还没开始加载（甚至DOM都还没挂载到页面上），控制台的输出可能只是你在测试时的同步逻辑，但实际渲染时拿不到异步的加载状态。把逻辑交给浏览器的onerror事件，才能真正捕获到加载失败的情况。

内容的提问来源于stack exchange，提问作者Kokox