かとのぼのマイコード・マイライフ

個人開発者かとのぼのプログラミングと雑談のブログです。たまに読書と銭湯も

imgを動的にバインディングする方法【Vue.js】

Vue.jsで、ツイッター認証などで取得した画像を表示させる方法が少しハマったのでメモです。

Vue.jsで動的に画像を設定させるには「v-bind:src」

結論は、動的に画像を設定するためには

 template要素の中に

<img v-bind:src="ここにdataや画像のURLを入れる">

「v-bind:src」で設定する。

二重括弧( {{ }} )mustache構文だとエラーが出るから注意してください

qiita.com

 というか、普通に公式ドキュメントにも書いてありましたね…。

発展:相対パスで画像を表示させようとしてもエラーになる

この方法で相対パスを使って画像を表示させようとしてもエラーが出ました。

<img v-bind:src="../../src/asset/">

のように、相対パスで設定しようとしても表示されません。

この場合は、webpackの処理の関係でうまく行かないらしいです。

他のサイトに載っていた解決策には、require("../../src/asset/")と「require」で挟むと良いと書いてあったがエラーがでました。

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

 そのため、結局私の場合は相対パス自体を諦めることにしました。解決策は次のような方法です。

解決方法:どうやってもうまく行かなかったので、「static」ディレクトリの中に画像を置くことで解決した。

staticディレクトリに格納されているデータはwebpackのビルドの影響を受けないとのことです。

つまり

<img v-bind:src="./static/hoge.jpg">

のように./static下に画像データを設定しました。

qiita.com

 

追記:

Bootstrap-Vueのライブラリを使って画像をデータバインディングする方法はこちらを参考にしてください。 

www.katonobo.com