每日一篇（9）--vue关于图片的引入和错误图片展示

1、关于图片的引入有两种方式：

• require
• 路径直接引入
  (1)关于require引入：

<div>
<img :src='imgSrc'/>
</div>

<script>
created(){
	this.imgSrc = require('@/assets/default-avatar.png')
}
</script>

(2)关于路径直接引入

<div>
<img :src='@/assets/avatar.png'/>
</div>

2、错误图片展示
在图片展示时，通过接口调用时，会出现加载延迟或者图片地址失效的情况，这个时候需要展示一张默认图片：

<img :src='imgUrl' @error='handleError'/>

created(){
	//执行方法
	this.handleError()
},
methods:{
	handleError(e){
		e.target.src = reqiure('@/assets/error.png')
		//默认展示错误图片
	}
}

看都看到这里了 打赏下吧 有钱出钱 没钱的点个关注叭~