src路径正确的情况下React项目部分图片无法显示问题求助

排查方向及修复代码 #

• 可选链取值为空导致的src无效
  item?.media?.url在层级中任意字段为undefined/null时会返回空值，此时img标签会将当前页面地址作为src发起请求，自然加载失败。
  修复方案：添加兜底逻辑或条件渲染

  // 方案1：加占位图兜底
  <img src={item?.media?.url || '/default-placeholder.png'} alt="资源封面" />
  
  // 方案2：仅当url存在时渲染img
  {item?.media?.url && <img src={item.media.url} alt="资源封面" />}
  

• 跨域/CSP策略拦截
  直接在地址栏输入URL可正常访问，是因为浏览器地址栏发起的请求不会携带当前站点的Origin头，不受跨域规则限制；而页面内img请求会带Origin，若图片服务端未配置允许你的站点跨域，就会被拦截。
  修复方案：添加crossOrigin属性

  <img src={item?.media?.url} crossOrigin="anonymous" alt="资源封面" />
  

• URL包含特殊字符未编码
  若图片URL中存在中文、空格、特殊符号等未经过URL编码的内容，React渲染时会自动转义导致地址失效。
  修复方案：用encodeURI包裹URL处理

  <img src={item?.media?.url ? encodeURI(item.media.url) : '/default-placeholder.png'} alt="资源封面" />
  

• img标签缺少必填属性
  部分项目配置了ESLint规则或无障碍校验，会拦截缺少alt属性的img标签渲染，补全alt属性即可解决。

问题参考截图 #

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