VueでLaravelのpublicディレクトリ配下にある画像を読み込む方法

Laravelだけであれば、ヘルパーメソッドの「asset」を使えばpublic配下の画像を読み込みことができます。

【Laravelの使い方】CSSファイル・JSファイル・画像ファイルの読み込み方法

しかし、Vue.jsも使うとなると、Vue内でヘルパーメソッドは使えないので、次のように書くことはできません。

<img src="{{ asset('/img/test.png') }}" alt="タイトルロゴ">

VueでLaravelのpublic配下にある画像ファイルを読み込む方法

ディレクトリ構成が次のようになっていたとします。

public
  |__ img 
       |__ test.png

Vueから見た場合、/publicがルートディレクトリになるため、次のように書け画像を読むことができます。

<img :src="'/img/test.png'" alt="タイトルロゴ">

「src」ではなく「:src」にしないといけないので注意しましょう。

created by Rinker
秀和システム
¥3,300 (2022/12/05 19:44:20時点 Amazon調べ-詳細)
created by Rinker
¥4,555 (2022/12/05 22:31:30時点 Amazon調べ-詳細)

コメントを残す

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

CAPTCHA