カツオ @FirebaseとVue.jsとちょっとNode.jsでWebサービス開発中

起業、転職、サラリーマン生活、Webサービス、アプリ、働き方、プログラミング、Java、JavaScript

javascript vue.js

【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。

-javascript, vue.js

執筆者:


comment

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

関連記事

【vue.js】【メモ】vue.jsのプロジェクトの作成コマンド

【Vue.js】ドラッグアンドドロップの実装方法(vuedraggable)

vue.jsでドラッグアンドドロップの実装ですが、「vuedraggable」を利用することで優れたUIを簡単に実装することができます。 vuedraggableの使い方については以下サイトがとても丁 …

【vue.js】コンポーネント間のメソッドの呼び出し|親から子(ref)、子から親(emit)

Vue.jsで別コンポーネントに定義しているメソッドの呼び出し方についてメモしておきたいと思います。別コンポーネントの呼び出しは大きく2つ存在します。 親から子(ref) 子から親(emit) 最初に …

【Vue.js】v-forの中でrefを使う($refsの指定方法)

Vue.jsのref便利ですよね。親コンポーネントから子コンポーネントの値や関数を使うことができます。今回、v-forを使って繰り返し処理で動的に生成したコンポーネントをrefで操作しようとしてけっこ …

no image

【Vue.js】ファイルアップロード(複数ファイル)の渡し方(axios)

Vue.jsをつかって開発をやっています。画像アップロードを作りたくて、この2日くらい色々調べながら実装をしていました。ようやくそれなりに動くものができましたので、せっかっくなのでブログにも記載させて …