画像が表示されません【Laravel】

Question

実現したいこと

画像投稿機能の実装を目指しているのですが、ストレージに保存された画像をトップページに表示されることが出来ません。
ストレージに保存された画像を表示させるコードの書き方が、以下で適切かを見て貰えないでしょうか？

前提

ストレージに画像を保存することは出来ています。

発生している問題・エラーメッセージ

画像が表示されずに四角い写真のマークが出ております。

該当のソースコード

@extends('layouts.app')

@section('content')
  @auth
    <div class="container">
      logged in!</br>
      <a href="{{ route('post.create') }}">掲載</a>
    </div>
    @foreach($posts as $post)
      <div class='card'>
        <a href="/posts/{{$post['id']}}">
          <img src='{{ Storage::url($post->image)}}' width="100px"></br>
          @if($post->gender == 'オス')
            {{ $post['name'] }}くん</br>
          @else
            {{ $post['name'] }}ちゃん</br>
          @endif
        </a>
      </div>
    @endforeach
  @else
    <div class="container">
      home
    </div>
  @endauth
@endsection

<?php

namespace App\Http\Controllers;
use App\Models\Post;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\DB;

class HomeController extends Controller
{
    /**
     * Create a new controller instance.
     *
     * @return void
     */
    public function __construct()
    {
        $this->middleware('auth');
    }

    /**
     * Show the application dashboard.
     *
     * @return \Illuminate\Contracts\Support\Renderable
     */
    public function index()
    {
        $posts = Post::all();
        return view('home', ['posts' => $posts]);
        //return view('home');
    }
}

<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\PostsController; //投稿機能

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider and all of them will
| be assigned to the "web" middleware group. Make something great!
|
*/

Route::get('/', function () {
    return view('home');
    //return view('welcome');
});

//Sass(デザイン)
URL::forceScheme('https');

//トップページ
//ユーザー
Auth::routes();
//サインアップ・ログイン後の遷移
Route::get('/home', [App\Http\Controllers\HomeController::class, 'index'])->name('home');

//投稿
Route::get('/create', [App\Http\Controllers\PostController::class, 'create'])->name('post.create');
Route::post('/posts', [App\Http\Controllers\PostController::class, 'store'])->name('post.store');

//投稿を押した時
Route::post('/post', [App\Http\Controllers\PostController::class, 'store'])->name('post.store');

<?php

namespace App\Http\Controllers;
use App\Models\Post;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\Validator;

class PostController extends Controller
{
    public function index()
    {
      // データベース内のすべてのpostを取得し、post変数に代入
      $posts = Post::all();
      // 'posts'フォルダ内の'index'viewファイルを返す。
      // その際にview内で使用する変数を代入します。
      return view('posts/index', ['posts' => $posts]);
    }
    
    public function show($id)
    {
      $post = Post::find($id); // idでPostを探し出す
      return view('posts.show', ['post' => $post]);
    }
    
    public function create () 
    {
        return view('posts/create');
    }
    
    public function new()
    {
        return view('post/new');

    }
    
    public function destroy($id)
    {
      $post = Post::find($id);
      $post->delete();
      return redirect('/posts');
    }
    
    public function store(Request $request)
    {
      //ユーザーIDを取得
      $user_id = Auth::id();
      // 新しい Item を作成
      $post = new Post;
      // フォームから送られてきたデータをそれぞれ代入
      $post->user_id = $user_id;
      $post->name = $request->name;
      
      //画像投稿の記述
      $post->image = $request->image->store('images');
      
      $post->age = $request->age;
      $post->gender = $request->gender;
      $post->explanation = $request->explanation;
      // データベースに保存
      $post->save();
      return redirect('/');
    }
    
    protected function validator(array $data)
    {
        return Validator::make($data, [
            'name' => ['required', 'string', 'max:255'],
            'image' => ['file', 'mimes:gif,png,jpg,webp', 'max:3072'],
        ]);
    }
}

試したこと

画像の表示のさせ方、コードの書き方を調べて、記述したのですが、うまく画像を特定できていないのでしょうか？

補足情報（FW/ツールのバージョンなど）

php: 8.1.21
laravel: 10.18.0

！追記！
コンソールから画像が表示されない原因を探ってみたところ、下記の表示がありました。

4CkuxLJ5p5wzf4VkTosZIIxLOSKmfcIiiIWJJ8Gt.jpg:1     Failed to load resource: the server responded with a status of 404 (Not Found)

画像が格納されているファイルを見つけられなかったといった類のエラーのように見えましたが、合っていますでしょうか？

サーバーのエラーログを確認しました。

[previous exception] [object] (Error(code: 0): Undefined constant \"image\" at /home/ec2-user/environment/mysite-test/storage/framework/views/f4b7cd1ceb841d5254e4ac3758f1773e.php:6)
[stacktrace]

Comments

[AbeTakashi]

ブラウザやサーバのログはどのようになっているのでしょうか？ ソースコードと「画像が表示されない」という情報だけでは、第三者には何が起きているのかが分かりませんので、回答が出てくるのは厳しいかと思います。

不具合を判断する際に一番役に立つ材料として、ブラウザのコンソールに出てくるログやサーバのエラーログ（ApacheもしくはNginxのログ、Laravel上のログ）が非常に参考になります（404エラーならサーバのログの方がより具体的に原因が書かれてると思いますので、なるべくはサーバのログを参考にしてください）。こちらの内容をまずは確認して、それでも原因が判断できない場合は、そのログの内容を質問文内に追記してください。ログの情報があれば回答が出てくる可能性はあります。

[student]

コンソールから調べた事を追記させて頂きました。
情報が足りなかったら、さらに調べて追記させて頂きます。

[AbeTakashi]

404エラーですね。ということで、前回のコメントにも書きましたが、サーバ側のエラーログも見てみてください。こちらの方がより具体的な理由でNot Foundになってるかの理由が書いてあります。URLのパス情報からここにあると期待されてるファイルシステム上のパスと、実際にファイルがあるパスに相違があるためと思われますので、その情報を元に解決を図る方向になるかと思います。

[student]

ありがとうございます。調べてみます。

ちなみに画像はstorage/app/images/$post->imageに保存してあり、画像のパスを表示させてみたところ、images/icMIKLHFmM2tPHJSqqUlVw43I4q6dYXdwYDOJ76r.jpgと表示されたました。
storageやapp等の指定も必要かを調べてみます。

[student]

サーバーのログを確認したところ、[previous exception] [object] (Error(code: 0): Undefined constant \"image\" at /home/ec2-user/environment/mysite-test/storage/framework/views/f4b7cd1ceb841d5254e4ac3758f1773e.php:6)
[stacktrace]と表示されたのですが、こちらのエラーの原因や対処や修正などを調べたのですが、分かりませんでした。

[AbeTakashi]

↑この情報は質問文側に追記した方が良いと思います。

エラーが出てるファイルはviewのテンプレートが吐き出しているphpだと思いますが、Undefined constant \"image\"であれば、$post->image が間違っているということではないでしょうか？ コントローラー内で$postsの中身をトレースするなどしてデバッグされると良いかと思います。ただ、このエラーはおそらく404とは別のエラーな気もします（404エラーの場合は明示的に404のレスポンスコードとその直接的な原因が書いてあるはずです）。他のログも含めてもう少し包括的に不具合を調べた方が良さそうです。

[student]

また調べてみます。
画像の投稿を保存する記述をPostControllerのstoreアクションに書き込んでいるのですが、そこが可笑しいのでしょうか？
$post->image = $request->image->store('images');

現在は
sorageーappーimagesー画像
のような流れで投稿した画像が入っているのですが、ここの保存の仕方はおかしいのでしょうか？
調べると、storageフォルダーの中に画像を保存させる流れだったと思ったのですが。

[AbeTakashi]

ちょっと分かりませんが、DBに格納してる$request->image->store('images')という文字列と、Storage::url($post->image)でパスとして展開される際に使用される文字列が上手く合致してないとか、そうういうことが起きてるような気もします。

まずはデバッグ作業として、View側で変数ではなく直接Storage::url('画像のパス文字列')などで画像が表示されるか？などを試してみるなどして、実際に画像が表示されたら、データベースに格納されている文字列とどう違うか？などを検証されたらどうでしょうか。

[student]

直接、画像をstorage/app/images/画像にもstorage/画像にも入れて試してみたのですが、どちらも表示されることはありませんでした。
もしかしたらstorageが使用できていない状況なのかもしれないと思ったのですが、storageはphp artisan storage:linkで利用できるようになると思ったのですが、そこに関しては適切でしょうか？

[student]

appファイルにあるpublicファイルでは表示されました。
またconfigにあるfilesystems.phpのlocalにある、ストレージの保存先の変更によってstorage/app/public/images/画像に設定を変更して、画像が表示できるようなパス指定を探ってみます。

[AbeTakashi]

php artisan storage:linkでpublic以下にシンボリックリンクができているでしょうか？ OSが書かれていないので何とも言えませんが、Windowsだと管理者権限が必要になる場合があるようです。

参考）
https://qiita.com/shioharu_/items/608d024c48d9d9b5604f

シンボリックリンクが問題なくできているのなら、念のためApacheの設定でシンボリックリンクが使える設定になっているかも念のため確認した方がいいでしょう。

デバッグの方向性としては正しいと思うので、何とか原因を見つけられるように頑張ってください。

参考）
https://kkayataka.hatenablog.com/entry/2013/05/13/221333

[student]

ありがとうございます。
投稿を行い、storage/app/public/imagesに入った画像パスを特定して、imgを書いたところ、表示されました。これで投稿して保存されたファイルが表示されることが分かったのですが、srcでうまくとパスを指定できていません。
調べてみたところ、下記のサイトがヒントになるような事を書いていたのですが、store('images')で画像を保存するのが良くないとのことですが、storeAsでうまく登録できないので、現状はstoreで登録にしています。
ちなみに表示された投稿の画像はfilesystem.phpのlocalにあるroot' => storage_path('app/public/images'),で保存させて、特定の画像のファイル名をしてして行ったら表示されました。

[student]

ちなみにOSはAmazon Linux release 2 (Karoo)です。
Cloud9を使用しています。

Answer 1

filesystems.phpのlocalにあるストレージへの保存先を変更しました。

'root' => storage_path('app/public'),

また画像の表示のパス指定は下記に行う事で表示されました。

<img src="{{ asset('storage/' . $post['image']) }}">