1,这个方法,我用了下,同一个图片路径,vue的环境下,本地是可以的,但是不知道为什么到了正式环境,存在的图片也被判断为了false
//判断图片是否存在function checkImgExists(imgurl) {var ImgObj = new Image(); //判断图片是否存在ImgObj.src = imgurl;//存在图片if (ImgObj.fileSize > 0 || (ImgObj.width > 0 && ImgObj.height > 0)) {return true;} else {return false;}}
2,可以使用img标签的error方法
js:onerror后面可以直接放上备用图片,也可以直接写方法
<img onerror="javascript:this.src='/upload/vod/0829-1/db8b269c40172799f215aba93f03a03d.jpg';" src="/upload/vod/0829-1/db8b269c40172799f215aba93f03a03d.jpg" >
vue:error后面跟方法,根据变量显示别的
<img v-if="item.showImg" @error="noExistImg(item)" :src="`${constants.ICONS_CHANNEL}/${item.channel.toLowerCase()}.png`" style="width: 45px;" alt=""><span v-else class="textLogo">{{item.channelName.substr(0,1)}}</span>noExistImg (record) {this.publishAccountArr.map(item => {if (item.id === record.id) {item.showImg = false}})}