ASP.NET MVC：如何检测外部网站的图片是否存在？

前端侧检测 #

• 利用Image对象预加载检测
  可以通过创建Image实例尝试加载目标图片，根据加载状态判断链接是否有效。示例代码：

  function checkImageValidity(url) {
    return new Promise((resolve) => {
      const img = new Image();
      img.onload = () => resolve(true);
      img.onerror = () => resolve(false);
      img.src = url;
      // 超时处理，避免长时间等待
      setTimeout(() => resolve(false), 5000);
    });
  }
  
  // 使用示例
  checkImageValidity('https://example.com/test.jpg').then(isValid => {
    if (!isValid) {
      // 替换为默认图片或提示用户
    }
  });
  

  注意：这种方法受跨域限制影响，如果目标网站未配置CORS，可能无法正常检测。

• 监听img元素的error事件
  在页面渲染图片时，直接给<img>标签绑定error事件，加载失败时触发处理逻辑，比如替换成默认占位图：

  <img src="https://example.com/test.jpg" onerror="this.src='/path/to/default.png'">
  

  这种方法简单直接，适合实时处理页面上的破损图片。

后端侧检测（更可靠） #

前端检测受跨域和浏览器环境限制，后端检测能规避这些问题，推荐作为主要检测手段：

• 发送HEAD请求验证
  向图片链接发送HEAD请求，只获取响应头信息，通过状态码和Content-Type判断是否有效：
  以Node.js为例：

  const axios = require('axios');
  
  async function checkImageUrl(url) {
    try {
      const response = await axios.head(url, {
        timeout: 5000,
        headers: {
          'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36'
        }
      });
      // 状态码200且响应头是图片类型
      return response.status === 200 && response.headers['content-type'].startsWith('image/');
    } catch (error) {
      return false;
    }
  }
  

  优点是请求开销小，无需下载整张图片。

• 发送GET请求（按需）
  如果HEAD请求被目标网站拦截，可以发送GET请求，但只读取响应头或少量内容，避免下载大图片，同时可验证返回内容是否为图片格式。

额外注意事项 #

• 防盗链问题：部分网站会设置防盗链，即使图片存在也会返回403状态码，可尝试在请求头中添加合理的Referer或User-Agent模拟正常请求。
• 缓存检测结果：检测后将结果缓存，避免重复请求，提升效率。
• 超时处理：无论前端还是后端检测，都要设置超时时间，避免请求长时间阻塞。

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