支持配置备用地址的图片组件

先写demo

---

import image form "image.js"
{
    .
    .
    .
    components:{
        image
    },
    template:``,
    .
    .
    .
}

//如果a.jpg加载失败,则加载backup.jpg.如果继续失败，则显示组件内指定的默认图片

源：

---

//image.js
const BLANK_SRC  =
    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAoAAAAKAAQMAAAA2A1tgAAAABlBMVEXp7vG6vsFj/vEvAAACjklEQVR42u3bMW6kMBiG4UUuaFaiTeeLrOSbxRyNo3AES" +
    "grEt/Ei5E1BY75EjPI+UqRMMa80M3jgH+FfAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADg9ejC0tgbdGFvDGZdmQyv2PCaO11am4K9Lm2ez6Ta3UE1BaOujS3B5A7m7wxO7uDcEtRL" +
    "B5e2pXx5hDYG98s15A72BAkS/PHBoNkbHLR5g0m7NyhpdAY7SbMzGCQtzuAgaXUHN2cwStqdweQOZn2wB0djUF8SnHzB7kWC84OD4YuDb+7gH0+wPvvdHZQ52Gn0vodBkzfYa/YGBy3" +
    "elRK1eoNJm/fbJmv3BiVZg+XB6DynhNJ2nvV6SbPzvDxIWpxXDlHS6gyW/zfHxVKJFLnEndeHKu4G+/p12KkYDZfE8//ByTcF9Crmu8GsehgWy91g1P4puPpmvaRiuz2N/v78c+LuG2" +
    "、91sAU7HUZXMOgwuYK9DrMrOOiwuIJRh9UVTDpsrmDWYXcFdTIFO51GTzDoNHmCvU6zJzjotHiCUafVE0w6bbeDb/UwLPY7wTo/qbodfP/3oBrvBvXxF1RNN4PdsTaquT1Y56dB1dI" +
    "erPNTVLW2B+v8lDzBOj9lT7DOTzIGc5lXnEFJ1mBpjb0reM5Pgyt4zk/OYGktyRiMJZFdwXN+kjGYVRiDMgc7dzC4g707OLiD0R1M7mB2B2UOdu5gcAd7d3BwB6M7mNzB7A7KHOzcwU" +
    "CQIEGCBAkSfEzwFe6dI0iQYPVN97TLEqxab+N/xs6FZwSzrk2PCKbHbxqK5n1S/p1cvTsY3JvXOsm8RzF7FkqVPEdNFa7fQgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA8OP9Baj+z" +
    "Drg8w1qAAAAAElFTkSuQmCC";

export default {
    template:``,
    name: 'image',
    data() {
        return {
            realSrc         :   ""
        }
    },
    watch:{
        src:{
            immediate:true,
            handler(value){
                var m = this;
                m.realSrc = value;
            }
        },
    },

    methods:{
        errorHandler(srcWhenError){
            var m = this;
            if (srcWhenError == m.errorSrc) {
                m.realSrc = BLANK_SRC;
            }else{
                m.realSrc = m.errorSrc;
            }
        }
    },
    props:{
        src:{type:String, default:""},
        alt:{type:String, default:""},
        errorSrc:{type:String, default:BLANK_SRC}
    }
}