このページでは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
¥6,321
(2024/11/21 11:12:15時点 Amazon調べ-詳細)
(2024/11/21 11:12:15時点 Amazon調べ-詳細)
