前端怎么快速判断一个图片的url 是可以正确访问的？

对于可视化页面，如果有场景需要图片缓存，就得需要先判断图片是否可用。 还有场景就是图片质量有高低之分，优先加载低质量图片，高质量图片作为备选，这个时候需要判读图片是否可以用。 以下是亲测可用方案。

async function checkImageUrl(url) {
  return new Promise((resolve) => {
    const img = new Image();
    img.onload = () => resolve(true);  // 图片可访问
    img.onerror = () => resolve(false); // 图片不可访问
    img.src = url;
  });
}

还有其他方案： 比如fetch 请求。

async function checkImageUrl(url) {
  try {
    const response = await fetch(url, {
      method: 'HEAD',          // 只请求头信息，不下载图片
      cache: 'no-cache',       // 跳过浏览器缓存
      mode: 'no-cors'          // 绕过 CORS 限制（但只能检测网络连通性）
    });
    
    // 检测内容类型是否为图片
    const contentType = response.headers.get('content-type') || '';
    const isImage = contentType.startsWith('image/');
    
    // 同时验证状态码和内容类型
    return response.ok && isImage;
  } catch {
    return false;
  }
}

这里请求头的method，需要后端支持。当然还有其他限制，我这里打印一下fetch的response.

const response = {
  body: ReadableStream,
  bodyUsed: false,
  headers: Headers {},
  ok: true,
  redirected: false,
  status: 200,
  statusText: "",
  type: "cors",
  url: "https://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/e08da34488b114bd4c665ba2fa520a31.svg",
}

这里 response 无法被JSON.stringify 序列化，一般只有返回的是JSON格式才可以：

if (response.headers.get('Content-Type').includes('application/json')) {
    return response.json();
}

这里想要获取图像用response.blob();

完整Demo: