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公式に書いてあった
<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
の設定とか、把握しとかないとですね。
ちょうどこの問題に直面していたところなので助かりました!ありがとうございます!
返信削除こちらの記事のおかげで解決できました!ありがとうございます。
返信削除悩みが解決しました!本当に感謝です;;
返信削除