

<https://stackoverflow.com/questions/54596396/vue-js-nuxt-js-load-fallback-
image-on-404>

上記の記事を元に、以下のような「image1がエラーの時はimage2を表示する」というプログラムを作成しました。

しかし、imgタグ内が `src` であるときはうまく動作しますが、 `:src` とバインディングした際には 404発生時にも`@error`
がトリガーされず困っています。  
上記の方法以外でも目的が達成できれば良いので、実現方法があればご教授いただけると幸いです。

[code]

    <img
     :src="image1"
     @error="setFallbackImageUrl"
    >
    
[/code]

[code]

    methods: {
        setFallbackImageUrl(event) {
            event.target.src = 'image2'
        }
    }
    
[/code]


CC BY-SA 4.0
2020-05-17T14:33:47.987
66720
2023-10-24T15:00:25.107
2020-05-17T16:42:20.450
3060
25869
question
javascript html vue.js nuxt.js
Nuxt.jsで画像読み込み時に404エラーが発生した際に代わりの画像に差し替えたい


試してみたところ、確かにページ表示直後はイベントが走りませんでした。  
`image_path` という変数を `image[src=]` と `input[type=text]` の両方にバインドさせ、  
入力値を変えるとイベントが発火しました。

[code]

    <template>
      <div class="container">
        <div>
          <input type="text," v-model="image_path">
          <img :src="image_path" @error="onError" alt="">
        </div>
      </div>
    </template>
    
    <script>
    export default {
      asyncData () {
        return {
          image_path : "/testx.jpg" // 存在しないイメージ
        }
      },
      methods: {
        onError (e) {
        console.log(e)
        console.log(e.target)
          e.target.src = "https://sites.google.com/site/dekchysite95/_/rsrc/1480944463347/extra-credit/google.png"
        }
      }
    }
    </script>
    
[/code]

表示直後ではイベントが走らないのかもしれませんね。

ちなみに以下のコードだとページ表示直後に発火します。

[code]

    <template>
      <div class="container">
        <div>
          <input type="text," v-model="image_path">
          <img :src="image_path" @error="onError" alt="">
        </div>
      </div>
    </template>
    
    <script>
    export default {
      data () {
        return {
          image_path : ""
        }
      },
      methods: {
        onError (e) {
        console.log(e)
        console.log(e.target)
          e.target.src = "https://sites.google.com/site/dekchysite95/_/rsrc/1480944463347/extra-credit/google.png"
        }
      }
    }
    </script>
    
[/code]

`data()` 関数上は空にしておき、 `creatd()` 関数で値をセットする、という対処でどうでしょう？


CC BY-SA 4.0
2020-05-22T05:09:57.400
66871
2020-05-22T05:09:57.400
34583
66720
answer