先写demo
import image form "image.js"
{
.
.
.
components:{
image
},
template:`<image :src="a.jpg" :error-src="backup.jpg"></image>`,
.
.
.
}
//如果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:`<img :src="realSrc" :alt="alt" @error="errorHandler(realSrc)">`,
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}
}
}