[Vue-rx] Handle Image Loading Errors in Vue.js with RxJS and domStreams-优快云博客

本文介绍如何在Vue中处理图片加载失败的情况，通过使用RxJS实现错误处理逻辑，当主图片无法加载时，自动加载备用图片。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>