Laravelでpublic linkにしたら画像が表示されない時の解決法

Laravel・PHP豆知識・トラブル対策

LaravelでPublic Linkにしたら画像が表示されないときの原因と解決法です。

次のように、画像が表示されていないとします。

このときのコードは下記のとおり。

画像以外の箇所はちゃんと表示されています。

原因を究明するため、画像箇所を右クリックし、別ウィンドゥで開いてみます。

URLから、どのパスを読み込んでいるかが確認できます。

どうやら imagesフォルダの前に【posts】がついてしまっています。

解決法① asset関数を使ってpublicフォルダを読み込ませる

このいらないフォルダ名【posts】をパスから削除したい!

そこで、 asset関数を使います。

asset関数を使うことで、publicフォルダを直接読み込ませることができます。

解決法② 画像フォルダが入っているフォルダ名をいれる

解決法①で解決したなら良いのですが、やっぱり画像が読み込まれない場合は、この先をお読みください。

public/storageをチェックして、画像がどのフォルダに入っているかチェックしてください。

たとえば、次のように【public/storage/images】と入っているとします。

次に、読み込めないときの画像のパスを確認します。

下記のように【ローカルホスト/images/画像ファイル名】なっているとします。

【images】の前に【storage】をいれれば、画像が表示されそうなことが分かります。

そこで、コードを書きのように書き換えます。

これで、表示されました。

解決法③ もっとスマートにコードを書きたい場合はアクセサを使う

解決法②で解決したものの「毎回 asset だの、ディレクトリ名を書くのは面倒」という場合、Laravelのアクセサを使えば解決します。

アクセサは、オリジナルのカラム名を加工してくれる機能。

指輪やネックレスといったアクセサリーのように、データをキレイに修飾してくれるイメージですね。

先ほどのコードをアクセサを使って、シンプルにしていきます。

アクセサを使ってコードをシンプルに

モデルファイルに下記を追加します。

これで、きちんとパスが入るようになります。

ビューのコードは下記のようにシンプルなものに書き換えます。

まとめ

画像が表示されないときは、ブラウザ上のパスをチェックしてみてください。

なおpublicフォルダの下に何かを置いたら、リンクを貼るときは、asset関数を忘れないようにしましょう。

じゅんこ
じゅんこ

私はよく忘れちゃいますが・・・

毎回面倒なパスを入れるのが面倒な場合や、私のように忘れてしまう人は、アクセサを使いましょう。

ビューファイルに毎回assetを入力する手間が省けますよ。

Laravel・PHP豆知識・トラブル対策

【Laravelの教科書・プレゼント】

Junko
Laravelの使い方を覚えたい!と思ったら、ぜひ、役立ててほしいです。 基礎編は無料でプレゼント中です♪
ひつじプログラマ
会員制サイトをいちから作っていくよ。ボタンをクリックして詳細を見てね。
Laravelの教科書の詳細を見る

最新のLaravel11版テキストに加え、Laravel8版・Laravel9版・Laravel10版もご用意しています♪

【無料プレゼント】

「LaravelでWebアプリをいちから作れるようになりたい!」

そんなLaravel初心者のあなたへ【Laravelの教科書】基礎編プレゼント中! 会員制フォーラムサイトを学習しながら作れます。

詳細はこちらをクリック

最新のLaravel11版テキストに加え、Laravel8版・Laravel9版・Laravel10版もご用意しています♪

【AWS関連・Webアプリ開発・生成AIのAPI活用のご相談承ってます】
お気軽にお声がけください。
御社にとって、最善の方法をご一緒に考えてまいります。
Zoomミーティング実施中。サンプルアプリご利用可能です。

お問合せフォーム

Laravelの本を書きました。


ひつじが目印♪
クリックするとamazonページへ。

Laravelの使い方を分かりやすく解説した書籍を出版しました。書店やAmazon等のオンラインショップにて販売中です。
Laravel10対応。Laravel11サポートガイドもご用意しています。詳しくは下記ボタンをクリック♪

書籍の詳細を見てみる

Laravelの本を書きました。


ひつじが目印♪
クリックするとamazonページへ。

最新版Laravel11用のサポートガイドご用意しています。

Laravelの使い方を分かりやすく解説した書籍を出版しました。書店やAmazon等のオンラインショップにて販売中です。

書籍の詳細を見てみる
Twitter始めました。
40代からプログラミング!
タイトルとURLをコピーしました