Edited at

vue.js 読み込みできなかったimg画像に代替画像を当てはめる component

More than 1 year has passed since last update.

htmlのimgタグのerrorイベントを利用して、指定した画像がリンク切れなどで読み込みできなかった場合に

指定の代替画像を当てはめるcomponentです。

こんな感じでどうでしょうか。

 Vue.component('replaceableImage', {

props: ['o'],
template: '<img :src="o.src" v-on:error="altSrc">',
methods: {
altSrc: function()
{
this.o.src = this.o.altsrc
}
}
})

var vm = new Vue({
el: '#app',
data: {
imgobj: {src:"本来の画像.jpg", altsrc:"代替画像.jpg" }
}
})

<div id="app">

<replaceable-image v-bind:o="imgobj"></replaceable-image>
</div>

代替画像の差し込みほか、エラーだった場合のclassを割り当てるなども同じ感じでできそうです。