vue 设置img的error图片

qq_38192105

于 2023-04-25 16:12:10 发布

阅读量834

点赞数

CC 4.0 BY-SA版权

分类专栏： img error图片 vue 文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/qq_38192105/article/details/130366947

2 篇文章

订阅专栏

1 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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