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

記事内に商品プロモーションを含む場合があります

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

しかし、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
(2024/11/24 12:18:54時点 Amazon調べ-詳細)

created by Rinker

¥3,699
(2024/11/23 18:27:07時点 Amazon調べ-詳細)