Q&A
前提・実現したいこと
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件
0
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
総合スコア80850
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/05/22 10:22
2021/05/22 11:01