Laravel 詳細画面で画像を表示したい

Question

前提・実現したいこと

PHP(Laravel7)で、献立アプリを作成しています。
一覧画面から詳細画面にアクセスし、詳細画面で各画像を表示したいです。

一覧画面ではforeachを使用して投稿された料理の画像が表示されるのですが、
詳細画面では料理名は表示されてるのですが、料理の画像が表示されません。

詳細画面⬇︎

![])

show($id)の$menuの中身

該当のソースコード

Menucontroller.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Models\Menu;
use App\Http\Requests\StoreMenuForm;
use Illuminate\Support\Facades\DB;

class MenuController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        //
        // $menu = Menu::all();
        $menus = DB::table('menus')
        ->select('cooking_name', 'cooking_image', 'id')
        ->get();
        $today = date("Y-m-d H:i:s");
        return view('menu.index', compact('menus'));
    }

    /**
     * Show the form for creating a new resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function create()
    {
        //
        return view('menu.create');
    }

    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(StoreMenuForm $request)
    {
        //
        $menu = new Menu;

       //画像ファイルのパス
        $img_url = $request->cooking_image->store('public/upload');

        $menu->cooking_name = $request->input('cooking_name');
        $menu->cooking_image = str_replace('public/', 'storage/', $img_url);

        $menu->save();

        return redirect('menu/');

    }

    /**
     * Display the specified resource.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function show($id)
    {
        //
        $menu = Menu::find($id);
        return view('menu.show', compact('menu'));
    }

    /**
     * Show the form for editing the specified resource.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function edit($id)
    {
        //
    }

    /**
     * Update the specified resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function update(Request $request, $id)
    {
        //
    }

    /**
     * Remove the specified resource from storage.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function destroy($id)
    {
        //
    }
}

show.blade.php

@extends('layouts.app')

@section('content')
  <h1>{{ $menu->cooking_name }}</h1>
  <img class="menu-image" src="{{ $menu->cooking_image }}" alt="{{ $menu->cooking_name }}">
@endsection

index.blade.php

@extends('layouts.app')

@section('content')
<link rel="stylesheet" href="{{ asset('/css/index.css') }}">

<div class="container menu-page">
  <h1 class="menu-day">{{ \Carbon\Carbon::now()->format("Y/m/d") }}の献立</h1>
  {{-- <h1>{{ $today }}</h1> --}}
  <br>
  <div class="menu-lists row">
    @foreach ($menus as $menu)
    <div class="card menu-card" style="width: 18rem;">
      <a href="{{ route('menu.show', $menu->id) }}">
        <div class="menu">
          <svg class="bd-placeholder-img card-img-top" width="100%" height="0" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Image cap"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"/><text x="50%" y="50%" fill="#dee2e6" dy=".3em"><img class="menu-image" src="{{ $menu->cooking_image }}" alt="{{ $menu->cooking_name }}"></text></svg>
          <div class="card-body">
            <p class="card-text">{{ $menu->cooking_name }}</p>
          </div>
        </div>
      </a>
    </div>
    @endforeach
  </div>
  <div class="shopping-lists">

  </div>
</div>

@endsection

ルーティング

<?php

use GuzzleHttp\Middleware;
use Illuminate\Support\Facades\Route;

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

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

Auth::routes();

Route::get('/home', 'HomeController@index')->name('home');

Route::resource('menu', 'MenuController');
Route::group(['prefix' => 'menu', 'middleware' => 'auth'], function(){
    Route::get('/', 'MenuController@index')->name('menu.index');
    Route::get('create', 'MenuController@create')->name('menu.create');
    Route::post('store', 'MenuController@store')->name('menu.store');
    Route::get('show/{id}', 'MenuController@show')->name('menu.show');
});

バージョン

Laravel 7.30.4
PHP 7.4.9

長い文章になり申し訳ございません。
ご教授の程、宜しくお願い致します。

Comments

[m.ts10806]

show($id)で得ている$menuをdd()で内容確認してみた結果を提示してください。
あとルーティングも提示してください。

[hase07_prog]

m.ts 10806さん
コメントありがとうございます。
ルーティングとddを使用して$menuの内容を追記しました！
ご確認お願い致します。

Answer 1

既存の回答で解決しそうなので私からはコードを見た感想を

• LaravelにはせっかくEloquentという便利なORMがあるから使用する

（使用していない明確な根拠・意図があるのであれば良い）

• 日時系はCarbonを利用する
• バリデーションを通す

あたりを改善すると良いかとお思います。

Comments

[hase07_prog]

kai0310さん、返信が遅くなり申し訳ありません。
ご指摘して頂きありがとうございます。
無事画像を表示することができました！

バリデーションは、フォームリクエストバリデーションを使用して、バリデーションを通しています。
まだEloquentなど理解が浅いので、もう一度復習し直し、知識の定着をさせていきたいと思います！

kai0310さんの感想を踏まえてもう一度わからないところを学習していきます。
ありがとうございました！

Answer 2

一覧画面と詳細画面でURL階層が変わっていることが原因です。
相対パスで書かれているため、
詳細画面では/show/storage/upload/・・・を参照しに行っています。
一覧もですが、public_path()など利用してWebルートからの絶対パスを指定するように調整してください。

Comments

[hase07_prog]

m.ts 10806さん
回答、ご指摘頂きありがとうございます。

お恥ずかしい事なのですが、public_path()はどのように使用したらいいのでしょうか？
コントローラのshowアクションで記述して、調整するのか
ルーティングファイルで、使用するのかわからない状態で
パスの指定方法がうまくいかなくてつまずいています。

申し訳ありませんが、返信お待ちしております

[m.ts10806]

関数はBladeでもそのまま使えたはずですが。
https://readouble.com/laravel/7.x/ja/blade.html#displaying-data

[m.ts10806]

ご自身でもasset()とか使われてますよね。

[hase07_prog]

m.ts10806さん、返信が遅くなり申し訳ありません。
ご指摘して頂きありがとうございます。
無事画像を表示することができました。

show.blade.phpの、imgタグのsrc属性で{{ '/' . $menu->cooking_image }}という風に
'/'を連結させたら、画像が表示されました。

アドバイス頂いたpublic_path関数を使用するのではない方法で解決したのですが
なぜ、'/'を連結させることで画像が表示できたのでしょうか？

[m.ts10806]

Webルートからの絶対パスになるから。

[hase07_prog]

ありがとうございます。
色々質問に答えて頂きありがとうございます。