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

ウェブサービス開発とプログラミングと雑記ブログ

Vue.jsでBootstrap-vueの画像をデータバインディングする方法

Vue.jsとBootstrapを使い、画像をデータバインディングする方法

Bootstrap-vueは便利ですが、画像をデータバインディングするのがやり方がわからずに苦労していました。

普通のbootstrapでは、

img-src="画像のURL"

ですが、これだとバイディングできません。

また、Vue.jsの双方向のデータバイディングの発想で、

img :src="画像のURL"

でいけるかというとこれでもうまく表示されません。

解決方法

解決方法は

:img-src="画像のURL"

これでバイディングできます。

つまり、「img-src」全体をバイディングしていると伝えているわけです。

Bootsrap-Vueの独特の使い方です。

これはちょっと盲点でした。

 

ちなみに、本番環境にデプロイする時には、画像データの置き場に「static」フォルダ下にしなくてはダメです。srcフォルダ下だとうまく反応しませんので注意してください。