如何检查图片URL可用性？失败时尝试备选URL并记录结果

核心思路 #

前端验证图片URL能否正常显示，最可靠的方式是利用浏览器的Image对象——通过监听它的onload（加载成功）和onerror（加载失败）事件，判断图片资源是否能正常加载。同时添加超时机制，避免因网络问题导致的无限等待。

实现步骤 #

1. 封装一个异步函数，用于检查单个图片URL的可用性
2. 按顺序尝试主URL和备选URL
3. 根据不同结果输出对应提示，或执行后续逻辑

完整代码示例 #

// 定义主URL和备选URL
const primaryUrl = 'https://img.youtube.com/vi/Q5twKgxO8xg/maxresdefault.jpg';
const fallbackUrl = 'https://img.youtube.com/vi/Q5twKgxO8xg/hqdefault.jpg';

// 封装检查图片URL的异步函数
function checkImageUrl(url) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    // 设置5秒超时，避免长时间等待
    const timeoutMs = 5000;
    const timeoutId = setTimeout(() => {
      reject(new Error('加载超时'));
      img.src = ''; // 终止未完成的请求
    }, timeoutMs);

    // 图片加载成功
    img.onload = () => {
      clearTimeout(timeoutId);
      resolve(url);
    };

    // 图片加载失败（404、资源损坏等）
    img.onerror = () => {
      clearTimeout(timeoutId);
      reject(new Error(`URL失效: ${url}`));
    };

    // 开始加载图片
    img.src = url;
  });
}

// 依次尝试URL的主逻辑
async function tryImageUrls() {
  try {
    await checkImageUrl(primaryUrl);
    console.log('主URL可用');
    // 此处可添加使用主URL的业务逻辑，例如：document.getElementById('my-img').src = primaryUrl;
  } catch (err) {
    console.log('主URL失效，尝试备选URL');
    try {
      await checkImageUrl(fallbackUrl);
      console.log('备选URL可用');
      // 此处添加使用备选URL的业务逻辑
    } catch (fallbackErr) {
      console.log('所有URL均不可用');
      // 此处添加全部失效后的处理逻辑，例如提示用户或使用默认占位图
    }
  }
}

// 执行检查
tryImageUrls();

关键说明 #

• 跨域兼容性：Image对象的跨域限制远低于XMLHttpRequest/fetch，适合前端跨域验证图片URL的场景
• 超时机制：避免因网络波动导致的请求挂起，提升用户体验
• 真实有效性：通过实际加载图片验证，确保URL返回的是可正常显示的图片资源，而非仅HTTP状态码为200的无效资源

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