每日一篇（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')
		//默認展示錯誤圖片
	}
}

看都看到這裏了 打賞下吧 有錢出錢 沒錢的點個關注叭~