【vue.js】画像ファイルのアドレスの指定方法について【vuetify】

投稿者: | 2018年10月13日

assets配下に格納している画像ファイルの指定方法についてちょっとつまって調べました。個人的によく忘れちゃうので画像などの静的リソースの指定方法についてメモしておきます。

imgタグの場合

<img src="@/assets/image/picture.png">

バインド変数に設定する場合(v-bind)

<v-img
class="white--text"
height="250px"
v-bind:src="require('@/assets/image/picture.jpg')"
></v-img>

require()で囲んであげることでURL解決ができます。

scriptの中で設定する場合

<template>
<img v-bind:src="imageurl">
</template>
<script>
data () {
return {
imageurl: require('@/assets/image/picture.jpg')
}
}
...

こちらもrequireで囲んであげればOK。


カツオが開発したWebサービスです。

「セールサーチ」ネットショップのセール情報の検索サイト!

平成の想い出を気軽に年表にしてシェアすることができるサービスです。ぜひ使ってみてください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です