當圖片404時顯示預設圖片
阿新 • • 發佈:2019-02-18
當圖片未找到或者404時,觸發 onerror 顯示其中的圖片:
<img src="assets/img/img.png" onerror="this.src='assets/img/default.png'"/>
當圖片 img.png 未找到時,會預設顯示 default.png,但若是預設圖片也沒找到,會引起崩潰,所以寫成以下形式,這樣當預設圖也沒找到時便會顯示裂圖圖示了:
<img src="assets/img/img.png" onerror="this.onerror='';this.src='assets/img/default.png'"/>
在 VUE 中可以寫為:
<div>
<img :src="pic" :onerror="img404">
</div>
<script>
export default {
data () {
return {
pic: "XXX.png",
img404: "this.onerror='';this.src='" + require('default.png') + "'"
}
}
</script>