如何通过if语句检测src属性缺失的图片并为其设置指定路径

核心判断逻辑 #

要区分「src属性不存在」和「src属性存在但取值为空」两种场景，必须使用DOM提供的hasAttribute()方法，不能直接读取img.src判断：DOM的img元素内置src反射属性，即使标签上没有写src属性，访问img.src也会返回空字符串，无法满足区分需求。

原生JavaScript实现 #

// 替换为你需要填充的默认资源路径
const DEFAULT_IMAGE_PATH = '/assets/default-placeholder.png';

// 等待DOM加载完成后执行校验
document.addEventListener('DOMContentLoaded', () => {
  // 获取页面所有img元素
  const allImages = document.querySelectorAll('img');
  
  allImages.forEach(img => {
    // 判断src属性是否不存在
    if (!img.hasAttribute('src')) {
      img.setAttribute('src', DEFAULT_IMAGE_PATH);
    }
  });
});

jQuery版本实现（如果你使用jQuery） #

const DEFAULT_IMAGE_PATH = '/assets/default-placeholder.png';

$(document).ready(() => {
  $('img').each(function() {
    // jQuery的attr方法在属性不存在时返回undefined，可直接判断
    if (!$(this).attr('src')) {
      $(this).attr('src', DEFAULT_IMAGE_PATH);
    }
  });
});

注意事项 #

• 若不需要等待整个DOM加载完成，可去掉外层的加载事件监听，直接执行遍历逻辑
• 该逻辑只会处理完全没有src属性的img标签，不会修改已经有src属性（哪怕值为空）的标签

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