画像の切り替え - Vue.js

画像を動的に切り替えるには、imgタグのsrcにdataやcomputedをバインドする。

<template>
  <div>
    <img :src="imageSrc"> <!-- コロンを付ける -->
  </div>
</template>

<script>
  export default {
    name: 'Sample',
    data () {
      return {
        imageSrc: `/img/hoge.png`,
      }
    },
    methods: {
      // changeImg が呼ばれると画像を変更(この関数を呼ぶ処理は省略)
      changeImg () {
        this.imageSrc = `/img/piyo.png`
      },
    },
  }
</script>

大きな画像の場合、読み込むまでの少しの間、古い画像が表示され続ける。

少しのことだが紛らわしいので、くるくる回る例のアレを表示させたい。くるくるは自作してもいいし、vue-spinner などで見栄えのいいのが設置できる。（css3アニメーション必須）

• greyby/vue-spinner: vue spinners
• Vueでloading indicatorを実装する - わいの日記

その際、画像を動的に切り替えられるようにしていると、くるくるは何度でも読込と同時に表示させ、終了とともに消す必要がある。

また、（発生しないように作るのが一番いいが）通信エラーや意図しないURLなどで読込失敗した場合も、きちんと消す必要がある。

vue-spinnerではloading属性で表示非表示を切り替えられる。Vue.jsではimgタグにおいて、loadイベントとerrorイベントが発火するので、それを使う。本当は失敗時にはエラーメッセージとか表示させてもいいけど省略。

<template>
  <div>
    <img :src="imageSrc" @load="imageLoaded" @error="imageFailed">
    <pulse-loader :loading="isLoading">
  </div>
</template>

<script>
  import {PulseLoader} from 'vue-spinner/dist/vue-spinner.min'

  export default {
    name: 'Sample',
    data () {
      return {
        imageSrc: `/img/hoge.png`,
      }
    },
    methods: {
      changeImg () {
        this.isLoading = true
        this.imageSrc = `/img/piyo.png`
      },
      imgLoaded () {
        this.isLoading = false
      },
      imgFailed () {
        this.isLoading = false
      },
    },
    components: {PulseLoader},
  }
</script>

srcに直接リンクするのではなく、Ajaxで画像を取得して適当なDOM要素に描画するやり方って、簡単に出来るのかと思ったけど、意外と無い？

base64エンコードするやり方は見つかったけど、ちょっと重くなるしなあ。

画像は画像でブラウザにURL指定して取得させるのがベターなんだろうか。