Vue.jsで画像のsrcに変数を使ったら画像が表示されない

起きている事象

img.vue

<template>
    <!-- 変数を展開せずにファイル名を指定すると表示される -->
    <img :src="~/assets/images/img-1.png" />

    <!-- 変数を展開しても画像ファイルが表示されない -->
    <img :src="`~/assets/images/${fileName}.png`" />
</template>

<script setup>
    const fileName = 'img-1';
</script>

解決方法

require()を使う！

img.vue

<template>
    <!-- require()で囲ってあげる -->
    <img :src="require(`~/assets/images/${fileName}.png`)" />
</template>

<script setup>
    const fileName = 'img_1';
</script>

読み込めない原因は？

Vue.jsはsrcで指定されているパスをそのまま表示しているわけではなく、vue-loaderというライブラリを使ってコンパイルしています。

これを、、、

<img src="../image.png">

このようにコンパイルしています。

createElement('img', { attrs: { src: require('../image.png') }})

コンパイルすることで、imagesディレクトリの場所を示すパスが入り、画像が表示されるようになります。

imgタグのsrc属性をv-bindした場合はこのコンパイル処理が走らなくなるため、わざわざ自分でrequire（）を使う必要があるみたいです。