Vue.jsで画像を表示する方法【現役エンジニアが解説】

今回は、Vue.jsで画像を表示する方法について、簡単に解説していきます。

HTML

Vue.jsでは画像をバインドして表示できます。

具体的にはimg要素のsrc属性をバインドさせ、表示する画像を動的に切り替えられます。

<div id="app">
  <img :src="'./assets/' + imageName + '.jpg'" />
</div>

上記のコードは、その場合のHTMLのサンプルコードで、画像名をimageNameプロパティの値にしています。

Vue.js

Vue.jsではプロパティを定義します。

以下に今回の場合のVue.jsのサンプルを示します。