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」にしないといけないので注意しましょう。

PHPフレームワークLaravel入門 第２版

created by Rinker

秀和システム

• Amazon
• 楽天市場
• Yahooショッピング
• 紀伊國屋書店

基礎から学ぶ Vue.js

created by Rinker

• Kindle
• Amazon
• 楽天市場
• Yahooショッピング
• 紀伊國屋書店