Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
190
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

Laravelのアセットに関するTips

css, js, 画像などの読み込みはassetヘルパーを使う

asset('ファイルパス')はpublicディレクトリのパスを返す関数。
僕は以下のような構成にしてます。

public 
  |__ css
  |__ js
  |__ img
  |__ html

各ファイルの読み込み方

index.blade.php
<!-- css -->
<link rel="stylesheet" href="{{ asset('/css/bootstrap.min.css') }}">

<!-- js -->
<script src="{{ asset('/js/jquery-3.1.1.min.js') }}"></script>

<!-- img -->
<img alt="ロゴ" src="{{ asset('/img/logo.png') }}">

セキュアな通信しかしないよって場合はsecure_assetを使う

HTTPSオンリーな本番環境の場合は、asset()の代わりにsecure_assset()を使います。
で、一つここに問題が。ローカルの開発環境ではSSLでつなげないので、環境ごとに読み込み方を変えます。

index.blade.php
@if(app('env')=='local')
    <link rel="stylesheet" href="{{ asset('/css/bootstrap.min.css') }}">
    <script src="{{ asset('/js/jquery-3.1.1.min.js') }}"></script>
@endif
@if(app('env')=='production')
    <link rel="stylesheet" href="{{ secure_asset('/css/bootstrap.min.css') }}">
    <script src="{{ secure_asset('/js/jquery-3.1.1.min.js') }}"></script>
@endif

レスポンスでHTMLファイルを返したい時

routes.php
Route::get('/hoge', function() {
    return File::get(public_path() . '/html/hoge.html');
});

public_path( )はpulicディレクトリのパスを返す関数。
HTMLファイルはpulic/html下に置きます。

CSSで画像を読み込みたい時

.hoge::before {
  content: '';
  height: 16px;
  width: 16px;
  background: url("../img/hoge.svg") no-repeat center center;
 }

url( )は、指定されたパスへ、アプリのルートからドメインを含めた完全なURLを生成してくれる関数。
ちなみにsecure_url( )もあります。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
190
Help us understand the problem. What are the problem?