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

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

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

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

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

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

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

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

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

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

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

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

<td><img src="{{asset($article->post_image)}}"></td>

1	<td><img src="{{asset($article->post_image)}}"></td>

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

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

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

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

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

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

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

<td><img src="{{asset('storage/'.$article->post_image)}}"></td>

1	<td><img src="{{asset('storage/'.$article->post_image)}}"></td>

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

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

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

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

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

<td><img src="{{asset('storage/'.$article->post_image)}}"></td>

1	<td><img src="{{asset('storage/'.$article->post_image)}}"></td>

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

    public function getPostImageAttribute($value){
       return asset('storage/'.$value);
    }

public function getPostImageAttribute($value){

return asset('storage/'.$value);

}

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

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

<td><img src="{{$article->post_image}}"></td>

1	<td><img src="{{$article->post_image}}"></td>

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

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

じゅんこ

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

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

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