React中如何优先使用主图，主图不可用时返回数组中第一个有效图片URL

你现有的代码仅判断了url字段是否存在，没有实际校验图片是否可正常加载（比如URL存在但返回404、跨域拦截等场景仍会加载失败）。且图片加载是异步行为，无法通过同步函数直接返回可用地址，可参考以下两种实现：

方案1：预校验获取第一个可用地址 #

适合需要提前拿到有效URL做其他业务处理的场景，通过Promise异步校验所有候选地址的可用性：

// 单个图片URL有效性校验工具
const validateImage = (url) => {
  return new Promise((resolve) => {
    if (!url) return resolve(false)
    const tempImg = new Image()
    tempImg.onload = () => resolve(true)
    tempImg.onerror = () => resolve(false)
    tempImg.src = url
  })
}

// 按优先级获取第一个有效图片地址
const getValidImageSrc = async (mainImage, images) => {
  // 优先校验主图
  const isMainValid = await validateImage(mainImage?.url)
  if (isMainValid) return mainImage.url

  // 遍历备选数组，返回第一个有效地址
  for (const imgItem of images) {
    const isValid = await validateImage(imgItem.url)
    if (isValid) return imgItem.url
  }

  // 所有地址都无效时返回默认占位图
  return '你的默认占位图URL'
}

// 调用示例
getValidImageSrc(mainImage, images).then(validSrc => {
  document.querySelector('目标img标签选择器').src = validSrc
})

方案2：配合img标签onerror事件自动降级 #

适合直接渲染img标签的场景，无需提前发送多余请求校验，性能更高：

<!-- 初始先加载主图，加载失败触发降级逻辑 -->
<img 
  src="{{mainImage?.url}}" 
  data-fallback-index="0"
  onerror="handleImgFallback(this)"
>

// 全局降级处理函数
function handleImgFallback(img) {
  const curIndex = Number(img.dataset.fallbackIndex)
  // 还有备选图片未尝试
  if (curIndex < images.length) {
    img.src = images[curIndex].url
    img.dataset.fallbackIndex = curIndex + 1
  } else {
    // 所有备选都失败，设置占位图后移除onerror避免死循环
    img.src = '你的默认占位图URL'
    img.onerror = null
  }
}

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