开发移动端h5页面时,碰到图片资源异步加载时,安卓手机页面上回显示个错误图片且图片占位尺寸不对导致页面视觉感官上不友好,所以需要在src获取资源中/失败的情况下预设个兼容error的图片展示出来,方式如下
vue2代码:
//template
<template>
<img :src="realImg" :onerror="errImg" alt="图片"/>
</template>
export default {
data() {
return {
errImg: 'this.src = "'+require('@/assets/images/base.png')+'"',//默认图片地址,自定义一张背景图
realImg: '',
}
}
}