如何通过JavaScript捕获失效图片URL并传递至PHP？

• 前端现有方案的小优化
  你当前用的onerror替换失效图片的方案完全可行，不过可以做个细节优化：把默认图片的路径提前统一管理（比如定义成PHP常量），避免重复写路径出错。另外你加的this.onerror=null非常关键，能防止默认图也意外失效时触发无限循环。但要注意，这个方案会有个小问题——浏览器会先尝试加载原图，失败后才替换成默认图，单页100张图的话，可能会出现短暂的加载失败闪烁，影响用户体验。

• 后端提前检测图片有效性（更推荐）
  既然你已经把图片URL存在MySQL里，不如在抓取图片时或者定期维护阶段，先检测图片是否可访问，这样前端就不用处理失效情况了。用PHP可以简单实现这个检测逻辑（记得设置合理的超时时间，避免拖慢进程）：

  function checkImageAvailability($url) {
      // 初始化curl
      $ch = curl_init($url);
      curl_setopt($ch, CURLOPT_NOBODY, true);
      curl_setopt($ch, CURLOPT_TIMEOUT, 5); // 5秒超时
      curl_exec($ch);
      $statusCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
      curl_close($ch);
      
      // 200表示正常，同时可以额外检查Content-Type是否为图片类型
      return $statusCode === 200;
  }
  
  // 在查询数据库后处理图片URL
  $originalUrl = $row['img_url'];
  $displayUrl = checkImageAvailability($originalUrl) ? $originalUrl : '默认图片本地路径';
  

  这样前端输出的<img>直接使用$displayUrl，完全避免了前端的错误处理开销，也不会有加载闪烁的问题。另外，外部图片的可用性是动态变化的，建议加个定时任务（比如每天一次），批量检测数据库里的图片URL，更新有效性状态。

• 懒加载优化单页性能
  单页加载100张图，哪怕都是有效图，也会拖慢页面初始加载速度。给图片加上懒加载，只加载用户视口内的图片，能大幅减少初始HTTP请求数：

  <img data-src="<?php echo $displayUrl; ?>" onerror="this.onerror=null;this.src='默认图片路径';" width="150" height="150" class="lazy-img">
  

  然后用原生JS实现懒加载逻辑：

  document.addEventListener('DOMContentLoaded', () => {
      const lazyImages = document.querySelectorAll('.lazy-img');
      const observer = new IntersectionObserver((entries) => {
          entries.forEach(entry => {
              if (entry.isIntersecting) {
                  const img = entry.target;
                  img.src = img.dataset.src;
                  observer.unobserve(img);
              }
          });
      });
      lazyImages.forEach(img => observer.observe(img));
  });
  

  结合之前的后端检测，既能保证图片有效，又能提升页面加载速度。

• 视觉体验优化：占位图/背景色
  不管是原图加载还是默认图，都可以给图片设置一个临时占位样式，避免页面布局跳动。比如用纯色背景或者简单的SVG占位：

  <img src="<?php echo $displayUrl; ?>" onerror="this.onerror=null;this.src='默认图片路径';" width="150" height="150" style="background-color: #f5f5f5;">
  

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