迴圈列表圖片載入出錯處理

1. 給圖片標籤新增一個onerror屬性

<template>
    <img :src="item" :onerror="default_avatar" v-for="(item, index) in list" :key="index"/>
</template>
複製程式碼

2. 定義預設圖片

import default_avatar from 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3014724736,3841342427&fm=27&gp=0.jpg'

export default {
    data () {
        return {
            default_avatar: 'this.src="'+ default_avatar +'"'
            list: [
               'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3532818382,996069357&fm=200&gp=0.jpg',
               'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3585331792,1037646459&fm=200&gp=0.jpg',
               'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=548571557,1928613985&fm=200&gp=0.jpg'
            ]
        }
    }
}
複製程式碼