katonobo’s blog

プログラミング中心の雑記ブログ

 お知らせ

 プログラミングスクールの口コミサイト「プロログ」をリリースしました プロログ

 プログラミングに興味ある方はぜひご覧ください!  

 またスクールに通われたことがある方はぜひ口コミにご協力ください!お願いします!

imgを動的にバインディング【Vue.js】【備忘録】

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

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

 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