画像が表示ができない(laravel)

前提・実現したいこと

laravelにて画像のアップロードを行なっており、アップロードした画像がトップページに表示できない状況です。
どうしたら画像を表示させることができますか、ご教授いただけると幸いです。

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

投稿した画像の表示ができない状況

該当のソースコード

PostController.php

<?php

namespace App\Http\Controllers;

use App\User;
use App\Post;
use App\Models\Like;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
use JD\Cloudder\Facades\Cloudder;

class PostController extends Controller
{
    public function __construct()
    {
        $this->middleware('auth')->except(['index']);
        $this->middleware(['auth', 'verified'])->only(['like', 'unlike']);
    }

/**
  * 引数のIDに紐づくリプライにLIKEする
  *
  * @param $id リプライID
  * @return \Illuminate\Http\RedirectResponse
  */
  public function like($id)
  {
    $post = Post::find($id);
    Like::create([
      'post_id' => $id,
      'user_id' => Auth::id(),
    ]);

    session()->flash('success', 'You Liked the Post.');

    return view('posts/show', ['post' => $post]);
  }

  /**
   * 引数のIDに紐づくリプライにUNLIKEする
   *
   * @param $id リプライID
   * @return \Illuminate\Http\RedirectResponse
   */
  public function unlike($id)
  {
    $post = Post::find($id);
    $like = Like::where('post_id', $id)->where('user_id', Auth::id())->first();
    $like->delete();

    session()->flash('success', 'You Unliked the post.');

    return view('posts/show', ['post' => $post]);
  }


    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index(Request $request)
    {
        if ($request->filled('keyword')) {
            $keyword = $request->input('keyword');
            $posts = Post::where('title', 'like', '%'.$keyword.'%')->latest()->get();
        } else {
            $posts = Post::latest()->get();
        }

        return view('posts/index', ['posts' => $posts]);
    }



    /**
     * Show the form for creating a new resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function create(Request $request)
    {
        $user_id = Auth::id();

        $message = '投稿フォーム： ';
        return view('posts/new', ['message'=>$message]);
    }

    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        $post = new Post();
        $post->user_id = $request->user()->id;
        $post->title = $request->title;
        $post->text = $request->text;
        $post->image_url = $request->image_url;
        
        $request->validate(
            [
            'title' => 'required|unique:posts',
            'text' => 'required',
 ],
            [
                'title.required' => 'タイトルを入力してください。',
                'text.required'  => '内容を入力してください。',
         ]
        );
        if(request('image_url')){
            $filename=request()->file('image_url')->getClientOriginalName();
            $inputs['image_url']=request('image_url')->storeAs('/work/public/storage', $filename);
        }
 

        $post->save();

        return redirect('/');
    }

    public function detail(Post $post)
    {
        return view('/', [
            'title' => $post->title,
            'text' => $post->text,
            'user_id' => $post->user_id,
            'image_url' => str_replace('public/', 'storage/', $post->image_url), //今回追加
        ]);        
    }

    /**
     * Display the specified resource.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function show(Request $request, $id, Post $post)
    {
        $post = Post::find($id);  // モデルから指定データ取得
        
        return view('posts/show', ['post' => $post]);
    }
    
    

    /**
     * Show the form for editing the specified resource.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function edit(Request $request, $id, Post $post)
    {
        $post = Post::find($id);
        if (\Auth::user()->id == $post->user_id) {
            return view('posts/edit', ['post'=>$post]);
        } else {
            return redirect()->route('post.show', ['id' => $post->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, Post $post)
    {
        $post = Post::find($id);

        $post->title = $request->title;
        $post->text = $request->text;
        if ($image = $request->file('image')) {
            $image_path = $image->getRealPath();
            Cloudder::update($image_path, null);
        
            $publicId = Cloudder::getPublicId();
            $logoUrl = Cloudder::secureShow($publicId, [
                'width'     => 1024,
                'height'    => 720
            ]);
            $post->image_path = $logoUrl;
            $post->public_id  = $publicId;
        }
        
        $post->save();
        return redirect()->route('post.show', ['id' => $post->id]);
    }

    /**
     * Remove the specified resource from storage.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function destroy(Request $request, $id, Post $post)
    {
        $post = Post::find($id);
        if (isset($post->public_id)) {
            Cloudder::destroyImage($post->public_id);
        }
        $post->delete();
        return redirect('/');
    }
}

@component('components.header')
@endcomponent
<main>
<div class="album py-5 bg-light">
    <div class="container" >
      <h1 style="text-align: center; font-size: 20px;">@include('posts/search')</h1>
      <p>  
      <h1 style="text-align: center; font-family: Impact;">????新着記事</h1>
      <p>
      <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
     
        @foreach ($posts as $post)
        <div class="col">
          <div class="card shadow-sm" style="border-radius: 10px 10px 10px 10px; background-color: #FEDCBD;">
          <img src="{{ asset('src/backend/public/images/browser.png') }}" width="100px">
            <div class="card-body">
             <p style="font-size: 30px;">{{ $post->title }}</p>
              <a class="card-text" style="text-decoration: none;" href="{{ route("post.show", ["id" =>  $post->id]) }}" >>>続きを読む</a>
              <div class="d-flex justify-content-between align-items-center">
                <div class="btn-group">
                  <small class="text-muted">投稿日時：{{ $post->created_at->format('Y/m/d')  }}</small>
                </div>
                <small class="text-muted">投稿者：{{ $post->user->name }}</small>
                
              </div>
            </div>
          </div>
        </div>
        @endforeach
        </div>
      </div>
    </div>
  </div>

</main>

試したこと

・ターミナルにてphp artisan storage:linkと入力し、表示されたパス(/work/public/storage)を用いてindex.blade.phpに「 <img src="{{ asset('/work/public/storage/browser.png') }}" width="100px">」と記述した。
・postsテーブルには保存できていることを確認した

行動規範の内容に同意します

回答1件

JavaScriptもCSSもですが、ブラウザからアクセスできないURLのものは読み込めません。

"{{ asset('src/backend/public/images/browser.png') }}"

一般的に、Webルートはpublicになってるはずなのでsrc/backend/publicは不要なのでは。
色々書いて試すよりも、ブラウザで画像URL直に打ってちゃんと表示されるかどうかを確認してください。
また、ブラウザに出力されているのはあくまでHTMLなので、ブラウザ表示後に「ソースを表示」で確認し、意図したURL、ちゃんとアクセスできるURLになっているかどうか確認してください。
コンソールにもURLが参照できない場合は404Not Foundのようなエラーが出ているはずです。

投稿2021/05/22 09:08