如何检查JSON中img src是否为空/未定义？处理数据缺失问题

1. 实现可靠的有效URL校验函数 #

用浏览器原生URL构造函数校验，比正则表达式更准确，能覆盖各种合法URL格式：

function isValidUrl(url) {
  // 先过滤非字符串、空值情况
  if (!url || typeof url !== 'string') return false;
  try {
    // 尝试构造URL对象，失败则判定为无效URL
    new URL(url);
    return true;
  } catch (invalidUrlError) {
    return false;
  }
}

2. 遍历JSON数据时处理字段缺失与无效值 #

结合可选链操作符（?.）和空值合并运算符（??），精准处理字段不存在、为空的场景，同时替换无效URL：

// 假设JSON数据数组为jsonData，页面目标容器ID是content-container
const container = document.getElementById('content-container');

jsonData.forEach(item => {
  // 处理kicker字段：仅当字段不存在/为null/undefined时用默认文本，空字符串保留
  const kickerText = item?.kicker ?? '无副标题';
  
  // 处理src字段：有效URL则使用，否则替换为占位图（或空字符串，按需调整）
  const validImageSrc = isValidUrl(item.src) ? item.src : '/path/to/placeholder-image.jpg';

  // 安全生成DOM元素（避免XSS风险，比字符串拼接更可靠）
  const itemElement = document.createElement('article');
  itemElement.className = 'content-item';

  const kicker = document.createElement('span');
  kicker.className = 'kicker';
  kicker.textContent = kickerText;
  itemElement.appendChild(kicker);

  const image = document.createElement('img');
  image.alt = '内容配图';
  image.src = validImageSrc;
  itemElement.appendChild(image);

  container.appendChild(itemElement);
});

关键细节说明 #

• kicker字段处理：item?.kicker会在item为null/undefined，或item无kicker属性时返回undefined，再通过??设置默认值；如果需要连空字符串也替换成默认值，把??换成||即可。
• URL校验逻辑：过滤了非字符串、空字符串的情况，若需支持站点内部相对路径，可在函数里补充判断（比如开头为/则视为有效）。
• DOM操作安全：用textContent和直接赋值src的方式避免XSS攻击，比直接拼接HTML字符串更可靠。

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