0

I have a component that I feed with props.

When an image throws a 404 I want to load a fallback image. So far so good.

However the @error function never fires when an image is broken and I can't figure out why! I never get 'hello event' in the console.

The component is on the first level of a nuxt page, my setup is a static SPA.

I tried to implement it as mentioned at the end of this github issue: https://github.com/vuejs/vue/issues/5404

<template>
  <div class="channel">
     <div class="img">
       <img :src="imgUrl" :alt="name" :title="name" @error="getFallBackImage" />
     </div>
  </div>
</template>

<script>
  export default {
    data: function() {
      return {
        chanCover: this.cover
      }
    },
    props: {
      name: {
        type: String,
        required: true
      },
      cover: {
        type: String,
        required: true
      }
    },
    computed: {
      imgUrl() {
        console.log(this.chanCover)
        return "channels/"+this.chanCover+".jpg"
      },
    },
    methods: {
      getFallBackImage(event) {
        console.log("hello event")
        this.chanCover = "default"
      }
    }
  }
</script>
mahatmanich
  • 10,791
  • 5
  • 63
  • 82
  • Not sure about the github issue but I've seen [this one before](https://stackoverflow.com/a/68027966/8816585), hope it may help. PS: mentioning me like that in the comments doesn't me any kind of notification. [Reach me directly](https://stackoverflow.com/users/8816585/kissu?tab=profile) if you want me to be 100% sure of seeing your question. – kissu Mar 24 '22 at 23:50
  • Thanks for the pointer @kissu that might actually work! – mahatmanich Mar 25 '22 at 13:13
  • Keep us updated. – kissu Mar 25 '22 at 18:32
  • I am still curious why error is not working here, but I switched everything towards webpack so the proposed solution did work! Thanks a bunch. – mahatmanich Mar 27 '22 at 20:09
  • What were you using before? – kissu Mar 27 '22 at 20:11
  • I tried using the code above, worked fine on a top level page but not in a component nested in a page ... @error just did not throw even when a url returned a 404. – mahatmanich Mar 28 '22 at 09:03
  • About webpack, you were using something else before? – kissu Mar 28 '22 at 09:04
  • Ah I see what your asking. I moved my images to be in assets/static folder and if there was an image missing I could catch the 500er error status code which is thrown by webpack/nuxtjs instead of a static/relativ url which throws only a 404 in the console. – mahatmanich Mar 28 '22 at 09:41
  • I also tried this one before going to your suggested solution: https://stackoverflow.com/questions/54596396/vue-js-nuxt-js-load-fallback-image-on-404 – mahatmanich Mar 28 '22 at 09:47
  • https://jsfiddle.net/teddyrised/uh2qes45/ the example from the last stack works but does not in my case inside of a component ... – mahatmanich Mar 28 '22 at 09:49
  • @kissu this seems to be the problem why my approach does not work: https://stackoverflow.com/questions/49214634/how-to-capture-vuejs-errors-from-a-single-point-inside-a-component – mahatmanich Mar 29 '22 at 12:45

0 Answers0