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')
//默認展示錯誤圖片
}
}
看都看到這裏了 打賞下吧 有錢出錢 沒錢的點個關注叭~