图片链接有效性校验实现方案：替换失效链接为占位图

针对API返回失效图片URL导致加载失败、需要用占位图替代的场景，分前端和后端两种实现思路：

方法一：利用图片onerror事件（最省心的前端方案） #

直接借助浏览器原生的图片加载失败事件，当图片无法加载时自动替换为占位图，无需提前校验。

HTML标签直接绑定：

<img src="API返回的图片URL" onerror="this.src='你的占位图URL'" alt="图片描述">

动态生成图片元素时绑定事件：

const img = document.createElement('img');
img.src = 'API返回的图片URL';
img.onerror = function() {
  this.src = '你的占位图URL';
};
document.body.appendChild(img);

优点：兼容性强、实现简单，无需额外请求；缺点：会产生一次无效的图片请求，有少量流量损耗。

方法二：提前用HEAD请求校验（需注意跨域限制） #

通过发送HEAD请求提前判断图片URL是否可访问，再决定加载原图还是占位图。

示例代码：

async function getValidImageUrl(imgUrl, placeholderUrl) {
  try {
    const response = await fetch(imgUrl, { method: 'HEAD' });
    // 状态码在200-399区间视为有效链接
    return response.ok ? imgUrl : placeholderUrl;
  } catch (err) {
    // 跨域错误、网络故障、超时等情况直接返回占位图
    return placeholderUrl;
  }
}

// 使用示例
getValidImageUrl('API返回的图片URL', '你的占位图URL').then(validUrl => {
  const img = document.createElement('img');
  img.src = validUrl;
  document.body.appendChild(img);
});

注意：多数图片服务器会禁止跨域HEAD请求，此时会直接触发catch分支返回占位图。该方案能减少无效图片请求，但依赖目标服务器的CORS配置。

如果有后端服务支持，建议在后端提前校验图片URL，避免前端处理的跨域和流量问题。

方法：发起HEAD/GET请求检查状态码 #

以Node.js（axios）为例：

const axios = require('axios');

async function validateImageUrl(imgUrl, placeholderUrl) {
  try {
    const response = await axios.head(imgUrl, { timeout: 5000 }); // 设置5秒超时
    if (response.status >= 200 && response.status < 400) {
      return imgUrl;
    }
    return placeholderUrl;
  } catch (err) {
    // 超时、网络错误、4xx/5xx状态码均返回占位图
    return placeholderUrl;
  }
}

以Python（requests）为例：

import requests

def validate_image_url(img_url, placeholder_url):
    try:
        response = requests.head(img_url, timeout=5)
        response.raise_for_status()  # 触发4xx/5xx状态码的异常
        return img_url
    except requests.exceptions.RequestException:
        return placeholder_url

后端校验注意事项 #

• 设置合理的超时时间，避免阻塞主业务流程；
• 对校验结果做缓存（比如缓存1小时），减少重复请求第三方服务器；
• 控制请求频率，避免被目标网站封禁IP。

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