如何替换加载失败的图片？编写jQuery代码后未生效求助

以下是几种可能导致你的代码不生效的原因及对应解决办法：

• 动态元素未使用事件委托
  如果.item是页面加载后动态生成的（比如通过AJAX、模板渲染添加），直接给.item绑定error事件只会作用于已存在的元素。改用事件委托绑定到父级或document：

  $(document).on('error', '.item', function(){
      $(this).attr('src', 'ph/vposter.jpg');
  });
  

• 事件绑定时机过晚
  若图片在你的代码执行前就已经加载失败，error事件已经触发完毕，后续绑定不会生效。需要主动检查已加载的图片状态：

  $(function(){
      $('.item').each(function(){
          const $img = $(this);
          // 检查图片是否加载失败
          if (!$img[0].complete || $img[0].naturalWidth === 0) {
              $img.attr('src', 'ph/vposter.jpg');
          }
      });
      // 同时绑定error事件处理后续加载的图片
      $('.item').on('error', function(){
          $(this).attr('src', 'ph/vposter.jpg');
      });
  });
  

• 替换图片路径错误
  确认ph/vposter.jpg的相对路径是否正确（相对于当前页面URL，而非JS文件路径）。可以在浏览器控制台输入new URL('ph/vposter.jpg', window.location.href)查看实际请求地址，若返回404则调整路径。

• 绑定目标元素错误
  检查.item是否是<img>元素。如果.item是图片的容器，需要将事件绑定到容器内的图片，比如.item img：

  $('.item img').on('error', function(){
      $(this).attr('src', 'ph/vposter.jpg');
  });
  

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