16
14

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【Laravel】画面に画像を表示する方法。assetsの使い方とurlヘルパ関数との違いについて。

Posted at

Laravelでブラウザに画像を表示する方法。

##1. publicディレクトリに画像をおく
ブラウザが直接読み取るデータなのでpublicディレクトリに設置する。

imgディレクトリを作成しその中に設置。
image.png

##2. assetヘルパーで呼び出す
imgタグのsrc属性で、assetsヘルパー関数を使って指定の画像を呼び出す。

<img src="{{ asset('img/cat3.png') }}" alt="">

以上で完了。

image.png


##assetヘルパー関数とは? publicディレクトリ配下の素材へのURLを生成する。

assets('ファイルパス')

ディレクトリの中にある場合は、ディレクトリ名.でつなぐ。

image.png

###ビューで呼び出す
ビュー(拡張子 .blade.php)の中で呼び出す場合は、{{ }}をつける。

.blade.php
{{ asset('img/cat3.png') }}
<br>
{{ asset('robots.txt') }}

▼ブラウザの表示

image.png

自分のサイトのpublicフォルダのパスが表示される。

あとは、aタグやimgタグのsrcで指定すれば、各アセットにアクセスできる。

公式ページには以下のように説明されている。(違いはよくわからない)


##urlヘルパとassetヘルパの違い URLを表示するヘルパには、`url()`という関数もある。

asset()
asset関数は、現在のリクエストのスキーマ(HTTPかHTTPS)を使い、アセットへのURLを生成

url()
url関数は指定したパスへの完全なURLを生成。

結論からいうと、urlassetもほぼ同じ。ただし、urlは引数でパスを渡せるので動的にURLを生成しやすい。


###urlヘルパとassetヘルパは同じ使い方ができる
.blade.php
asset: {{ asset('img/cat3.png') }} <br>
<img src="{{ asset('img/cat3.png') }}" alt="">

<hr>

url: {{ url('img/cat3.png') }} <br>
<img src="{{ url('img/cat3.png') }}" alt="">
image.png

全く同じURLが表示される。


###`url`に特化した使い方

url('prefixのパス', ['後ろに続くパス'])

例1
{{ url('img', ['cat3.png']) }}

image.png

例2
{{ url('column', ['technology', 2020, 1, 10, 'monday']) }}

image.png

動的にURLを指定する際に何かと便利。


##参考 [Laravel公式 ヘルパ一覧](https://readouble.com/laravel/7.x/ja/helpers.html#method-secure-url)
16
14
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
16
14

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?