vuejs テンプレート構文内のimgタグが表示されないとき

Vue.js

vueのテンプレート構文内に存在するimgタグsrcプロパティに変数を渡しても画像が描画されないときの対応方法

状況

  • 画像ファイルは ./src/assets/logo.pngに配置

下記のソースは画像が正しく描画されません。

// NG
<template>
  <img :src="imagePath" />
</template>

<script>
export default {
  name: 'AppCircleIcon',
  data() {
    return {
      imagePath: '@/assets/logo.png',
    };
  },
};
</script>

下記のソースは画像が正しく描画されます。

// OK
<template>
  <img class="circle-icon" src="@/assets/logo.png" />
</template>

<script>
export default {
  name: 'AppCircleIcon',
};
</script>

原因

タグの中で文字列として静的に記述されている場合と、変数から動的に記述する場合では参照方法が異なるため。

詳細

cli.vuejs.org

対応

1.画像ファイルをモジュールとして扱う
（この対応では親から子にパスをpropsで渡す場合などで対応できない）

// OK
<template>
  <img :src="imagePath" />
</template>

<script>
import defaultImg from '@/assets/logo.png';

export default {
  name: 'AppCircleIcon',
  data() {
    return {
      imagePath: defaultImg,
    };
  },
};
</script>

2.画像ファイルを配置する場所を変更する
./public/img/フォルダに画像ファイルを配置

// ./public/img/logo.pngが存在する場合 OK
<template>
  <img :src="imagePath" />
</template>

<script>
export default {
  name: 'AppCircleIcon',
  props: {
    imagePath: {
      type: String,
      default: './img/logo.png',
    },
  },
};
</script>

この場合ではpropsに渡す参照先のパスはpublicフォルダ限定