美文网首页
图片加载失败调用onError显示默认图,不展示裂图片

图片加载失败调用onError显示默认图,不展示裂图片

作者: 码农私房菜 | 来源:发表于2021-04-11 12:52 被阅读0次

    React 图片加载失败调用onError显示默认图,不展示裂图片

    import React, { useState } from 'react'
    
    const Image = (props: any) => {
        let {
            defaultImg ='https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=91016227,2090420577&fm=26&gp=0.jpg',
            ...rest
        } = props
        const [isError, setIsError] = useState(true)
        const imgerrorfun = (event: any) => {
            // 只调用一次onError 防止默认图加载不出来导致死循环
            if (isError) {
                setIsError(false)
                event.target.src = defaultImg
            }
        }
        return <img onError={imgerrorfun} alt="" {...rest} />
    }
    
    export default Image
    
    如图:
    test1.png

    相关文章

      网友评论

          本文标题:图片加载失败调用onError显示默认图,不展示裂图片

          本文链接:https://www.haomeiwen.com/subject/dtfxlltx.html