How to render an uploaded image inside a view? - php

Question

I am trying to get an image to upload and render when asked too.
I have successfully got the image upload working on my localhost, but once I push the code to the forge server, it breaks.
The image is uploaded however this is what I see once the post is created... See below.
I am not sure how to fix this issue.
Does anyone have any advice or suggestions on how to address this issue?
What I am doing wrong?
PostConroller
<?php
namespace App\Http\Controllers;
use App\Post;
use Illuminate\Support\Facades\Auth;
use Illuminate\Http\Request;
use Intervention\Image\Facades\Image;
use Illuminate\Support\Str;
use Illuminate\Support\Facades\Storage;
class PostController extends Controller
{
public function __construct()
{
$this->middleware('auth');
}
/**
* Display a listing of the resource.
*
* #return \Illuminate\Http\Response
*/
public function index()
{
$posts = Post::all();
return view('post.index', compact('posts'));
}
/**
* Show the form for creating a new resource.
*
* #return \Illuminate\Http\Response
*/
public function create()
{
$post = new Post(); // What is this?
return view('post.create', compact ('post'));
}
/**
* Store a newly created resource in storage.
*
* #param \Illuminate\Http\Request $request
* #return \Illuminate\Http\Response
*/
public function store(Request $request)
{
$request->validate([
'title' => 'required',
'body' => 'required',
]);
$post = Post::create([
'user_id' => Auth::id(),
'title' => $request->title,
'body' => $request->body
]);
$this->storeImage($post);
return redirect('/posts');
}
/**
* Display the specified resource.
*
* #param \App\Post $post
* #return \Illuminate\Http\Response
*/
public function show(Post $post)
{
return view('post.show', compact('post'));
}
/**
* Show the form for editing the specified resource.
*
* #param \App\Post $post
* #return \Illuminate\Http\Response
*/
public function edit(Post $post)
{
return view('post.edit', compact('post'));
}
/**
* Update the specified resource in storage.
*
* #param \Illuminate\Http\Request $request
* #param \App\Post $post
* #return \Illuminate\Http\Response
*/
public function update(Request $request, Post $post)
{
$this->validatedRequest();
$post->update($request->except('image'));
$this->storeImage($post);
return redirect('/posts');
}
/**
* Remove the specified resource from storage.
*
* #param \App\Post $post
* #return \Illuminate\Http\Response
*/
public function destroy(Post $post)
{
$post->delete();
return redirect('/posts');
}
private function validatedRequest()
{
return request()->validate([
'title' => 'required',
'body' => 'required',
'image' => 'sometimes|file|image|max:5000',
]);
}
private function storeImage($post)
{
if (request()->has('image')) {
$filename = Str::random(14).'.'.request()->image->getClientOriginalExtension();
$image = Image::make(request()->image)->fit(300, 300, null, 'top-left')->encode();
Storage::disk('public')->put("uploads/{$filename}", (string) $image);
$post->update([
'image' => "uploads/{$filename}"
]);
}
}
}
Form (show.blade.php)
#if($post->image)
<div class="row">
<div class="col-12">
<img src="{{ asset('storage/uploads/' . $post->image) }}" alt=""
class="img-thumbnail">
</div>
</div>
#endif

Answer 1

Files uploaded and stored via Storage can be accessed with the same Storage class. Try
<img src="{{ Storage::disk('public')->url('/uploads/' . $post->image) }}" alt=""
class="img-thumbnail">
asset() is used for accessing files in /public