Vue.jsでimgタグのsrcをバインドさせる際の注意点

vue-cli webpack で作成したプロジェクトでは、img タグの src 属性に指定した画像URL（パス）は Base64エンコードされて出力されます。

<template>
    <img src="../../assets/test.png">
</template>

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEC...">

このように展開される。

がしかし

src を v-bind によって変数バインドさせた場合はそのままパス文字列が出力されてしまうのです。

<template>
    <img :src="image_src">
</template>

<script>
export default {
    data () {
        return {
            image_src: "../../assets/test.png"
        }
    }
}
</script>

<img src="../../assets/test.png">

当然、画像は表示されない。(publicではないので)

vue-loader公式に書いてあった

• アセット URL ハンドリング · vue-loader

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

コレは、

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

こういう形にコンパイルされるらしい。

require() で画像を依存ファイルとして読み込んでいるようです。

解決

<template>
    <img :src="image_src">
</template>

<script>
export default {
    data () {
        return {
            image_src: require("../../assets/test.png") // ←
        }
    }
}
</script>

無事、Base64のimage sourceが出力され画像が表示されました。

vue-cli で生成される webpack の設定とか、把握しとかないとですね。

​