[Vue-rx] Handle Image Loading Errors in Vue.js with RxJS and domStreams

When an image fails to load, it triggers an error event. You can capture the error event and merge it with your image loading stream to provide a backup image when things go wrong. This lesson shows how to load a placeholder image if the main image fails to load.

<img> has 'onerror' event to handle image loading error.

<img src="" onerror="someFn()" />

Therefore in Vue, we can do:

<img :src="" error="someFn" />

With Vue-rx:

<img :src="" v-stream:error="imageError$" />

export default {
  name: 'app',
  domStreams: [ 'imageError$'],
  subscriptions() {}

}

<template>
  <section class="section">
    <button class="button" v-stream:click="click$">Click</button>
    <h2>
      {{name$}}
    </h2>
    <img v-stream:error="imageError$" :src="image$" alt="">
  </section>
</template>

<script>
import { from, merge } from 'rxjs';
import { switchMap, pluck, map, mapTo } from 'rxjs/operators';

export default {
  name: 'app',
  domStreams: ['click$', 'imageError$'],
  subscriptions() {

    const person$ = from(
      this.$http.get(
        "https://starwars.egghead.training/people/1"
      )
    ).pipe(
      pluck('data')
    )

    const luke$ = this.click$.pipe(
      switchMap(() => person$)
    )

    const name$ = luke$.pipe(
      pluck('name')
    )

    const loadImage$ = luke$.pipe(
      pluck('image'),
      map(src => `https://starwars.egghead.trainin/${src}` )
    )

    const failImage$ =  this.imageError$
    .pipe(
      mapTo(`http://via.placeholder.com/400x400`)
    )

    const image$ = merge(
      loadImage$,
      failImage$
    )

    return {
      name$,
      image$
    }
  }
};
</script>