对于c端应用,图片兜底非常重要,否则当后台没有返回图片,或者图片地址失效时就会出现下面这种情况:
最简单的方法时在img标签的onError回调中进行处理:
<img className='recieve-item-img' src={data.trialImg} onError={(e)=>imgError(e)} />
const imgError = (e, isShow, src) => {
if(!isShow){
e.target.style.display = 'none'
}else if(src){
e.target.src = src
}
}
入参src替换失效图片为兜底图,或者设置isShow为false,隐藏加载失败的img标签,并在父元素的背景上加兜底图。