1. 程式人生 > >當圖片404時顯示預設圖片

當圖片404時顯示預設圖片

當圖片未找到或者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>