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

このページではLaravelであなたが用意した、CSSファイルやJSファイル、画像ファイルなどの外部ファイルを読み込む方法について解説します。

外部ファイルの読み込み方法

外部ファイルを読み込むにはヘルパーメソッドのassetを使います。

assetメソッドは、あなたが作ったプロジェクトのpublicディレクトリまでのパスを返してくれる関数なので、publicメソッドにCSSファイルやJSファイルなどを入れておけば、容易に読み込むことができます。

僕のpublicフォルダの構成は次の通りになっているので、以降、このフォルダ構成であることが前提で紹介していきます。

public
  |__ dist
  |    |__ css
  |    |__ js
  |__ img 

CSSファイルを読み込む方法

<!-- CSSの読み込み -->
<link href="{{ asset('/dist/css/app.css') }}" rel="stylesheet" type="text/css">

これにより「public/dist/css」にあるcssファイル「app.css」を読み込みます。

JSファイルの読み込み

<!-- JSファイルの読み込み -->
<script src="{{ asset('/dist/js/app.js') }}"></script>

これにより「public/dist/js」にあるjsファイル「app.js」を読み込みます。

画像ファイルの読み込み

<!-- 画像ファイルの読み込み -->
<img class="p-main__image" src="{{ asset('/img/test.png') }}" alt="トップ画像">

これにより「public/img」にある画像ファイル「test.img」を読み込みます。

 

あとは画面で確認し、きちんと反映されているか確認しましょう。

おすすめのLaravelの書籍

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

コメントを残す

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

CAPTCHA