React中如何校验图片是否有效、是否存在损坏？

我们可以在内存中创建临时的Image实例预加载图片资源，无需将img元素渲染到页面，即可完成有效性校验，完全适配background-image的展示场景，同时可以自定义加载失败的通知逻辑。

类组件实现示例 #

import React from 'react'

class MediaGallery extends React.Component {
  state = {
    // 标记图片是否有效
    isImageValid: false,
    // 控制损坏提示展示
    showDamageTip: false
  }

  // 图片校验方法
  checkImageValid = (imgUrl) => {
    const tempImg = new Image()
    tempImg.src = imgUrl
    // 图片加载成功回调
    tempImg.onload = () => {
      this.setState({ isImageValid: true })
    }
    // 图片加载失败回调（资源损坏、404、跨域、格式不支持都会触发）
    tempImg.onerror = () => {
      this.setState({
        isImageValid: false,
        showDamageTip: true
      })
      // 此处可调用你的全局通知方法弹出提示，例如 antd 的 message.error、自定义toast等
      // message.error('当前图片文件已损坏，无法正常展示')
    }
  }

  componentDidMount() {
    // 组件挂载后先执行校验
    this.checkImageValid(this.props.imgUrl)
  }

  render() {
    const { imgUrl, style } = this.props
    const { isImageValid, showDamageTip } = this.state
    return (
      <div className="media-item">
        {/* 损坏提示 */}
        {showDamageTip && <div className="error-notice">图片文件已损坏</div>}
        {/* 背景图展示容器 */}
        <div 
          style={{
            ...style,
            // 有效则展示目标图，否则展示占位图
            backgroundImage: isImageValid ? `url(${imgUrl})` : 'url(你的默认占位图资源地址)'
          }}
        />
      </div>
    )
  }
}

函数组件实现示例 #

import { useState, useEffect } from 'react'

const MediaItem = ({ imgUrl, style }) => {
  const [isImageValid, setIsImageValid] = useState(false)
  const [showDamageTip, setShowDamageTip] = useState(false)

  useEffect(() => {
    const tempImg = new Image()
    tempImg.src = imgUrl

    tempImg.onload = () => setIsImageValid(true)
    tempImg.onerror = () => {
      setIsImageValid(false)
      setShowDamageTip(true)
      // 调用全局通知弹出提示
    }

    // 组件卸载时清理回调，避免内存泄漏
    return () => {
      tempImg.onload = null
      tempImg.onerror = null
    }
  }, [imgUrl])

  return (
    <div className="media-item">
      {showDamageTip && <div className="error-notice">图片文件已损坏</div>}
      <div 
        style={{
          ...style,
          backgroundImage: isImageValid ? `url(${imgUrl})` : 'url(你的默认占位图资源地址)'
        }}
      />
    </div>
  )
}

扩展：本地文件上传前校验 #

如果是用户刚选择的本地图片文件，不需要上传到服务器即可提前校验有效性：

const checkLocalImage = (file) => {
  const tempImg = new Image()
  // 将本地File对象转为临时链接
  tempImg.src = URL.createObjectURL(file)
  
  tempImg.onload = () => {
    // 校验通过，释放临时链接内存
    URL.revokeObjectURL(tempImg.src)
    // 后续可以执行上传逻辑
  }

  tempImg.onerror = () => {
    URL.revokeObjectURL(tempImg.src)
    // 直接提示用户文件损坏，无需走上传流程
  }
}

注意事项 #

• 该方法覆盖所有图片加载失败场景：文件损坏、资源404、跨域限制、格式不被浏览器支持都会触发onerror回调
• 如果存在图片跨域问题，可以根据实际业务情况给tempImg添加crossOrigin属性配置

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