开发移动端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: '',
}
}
}

在开发移动端H5页面时,遇到图片异步加载在安卓设备上出错的问题,表现为显示错误图片且尺寸不正确。为改善用户体验,文章提出了一种Vue2的解决方案,即在图片src加载失败时触发onerror事件,设置默认图片作为备选,确保页面视觉效果的友好性。
2万+

被折叠的 条评论
为什么被折叠?



