Last-Modified: 2022/06/07

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

PROGRAM

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

HTML

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

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

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

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

Vue.js

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

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

var app = new Vue({
  el: '#app',
  data: function() {
    return {
      imageName: 'hoge'
    }
  }
});

上記のコードでは、動的に変える場合には、imageNameプロパティの値を変えるだけです。

Vue CLIで作成した場合

Vue CLIで作成した場合、上記のソースでは動きません。

そのままのパスでは画像が正常に読み取られないためです。

<template>
  <img :src="require('./assets/' + imageName + '.jpg')">
</template>

<script>
export default {
  name: 'App',
  data: function() {
    return {
      imageName: 'hoge'
    }
  }
}
</script>

<style>
</style>

上記のコードのように、requireでパスを囲うことで、imageNameプロパティの値を変えるだけで表示するassetsディレクトリの中の画像を適宜切り替えられます。

• facebook
• Tweet
• Read Later