如何检测API接口$url是否返回图片？404时替换为本地图书图标

嘿，这个需求我太熟了！很多图书类应用都会遇到这种封面加载失败的情况，咱们直接从前端入手就能完美解决，给你几个实用方案：

1. 最简单的HTML原生方案：onerror 属性 #

直接在 <img> 标签里添加 onerror 事件，当图片加载失败（包括404错误）时，自动替换成本地图标。这是最快捷的实现方式：

<!-- 把$url换成你的API地址，ISBN参数按需拼接 -->
<img src="$url?isbn=978xxxxxxx" 
     onerror="this.src='/assets/images/default-book-icon.png'" 
     alt="图书封面">

小提示：如果担心本地图标也意外加载失败，可以再加一层兜底逻辑，避免触发无限循环：

<img src="$url?isbn=978xxxxxxx" 
     onerror="this.onerror=null; this.src='/assets/images/default-book-icon.png'" 
     alt="图书封面">

2. 更灵活的JavaScript事件监听 #

如果需要批量处理图片、添加错误日志或者做其他逻辑扩展，用JavaScript监听图片的 error 事件会更合适：

HTML 结构 #

<!-- 给图片添加统一类名和data-isbn属性方便追踪 -->
<img src="$url?isbn=978xxxxxxx" 
     class="book-cover" 
     data-isbn="978xxxxxxx" 
     alt="图书封面">
<img src="$url?isbn=978yyyyyyy" 
     class="book-cover" 
     data-isbn="978yyyyyyy" 
     alt="图书封面">

JavaScript 逻辑 #

// 获取所有图书封面元素
const bookCovers = document.querySelectorAll('.book-cover');

bookCovers.forEach(img => {
  img.addEventListener('error', function() {
    // 替换为本地图标
    this.src = '/assets/images/default-book-icon.png';
    // 可选：给失败的封面加样式标记
    this.classList.add('cover-load-failed');
    // 可选：记录错误日志，方便排查
    console.log(`ISBN ${this.dataset.isbn} 的封面加载失败，已替换为默认图标`);
  });
});

3. CSS 背景图兜底方案（适合用div展示封面的场景） #

如果你的封面是用CSS背景图实现的，可以利用多层背景图的特性，先尝试加载API返回的图片，失败后自动显示本地图标：

.book-cover-container {
  width: 120px;
  height: 180px;
  /* 先加载API图片，失败则显示本地图标 */
  background-image: url('$url?isbn=978xxxxxxx'), url('/assets/images/default-book-icon.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

额外注意事项 #

• 确保本地图标的路径正确，建议使用相对项目根目录的绝对路径（比如 /assets/xxx），避免因页面层级变化导致路径错误。
• 可以给默认图标添加轻微的样式区分（比如降低透明度、加灰色边框），让用户清晰知道这是默认封面而非真实图书封面。
• 如果你用的是Vue/React等框架，原理完全一致：Vue用 @error 指令，React用 onError 属性，写法稍有不同但逻辑相同。

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