how to display images with laravel - php

Question

I'm trying to upload images to my website but it does not show up
this is the HTML
<div class="col-md-10">
<div class="post-image">
<canvas style="display: none" id="canvas-preview" style="overflow:hidden;"></canvas>
<img id="img-preview" src="{{ url('backend/'). ($posts->preview_image?'/'. $posts->preview_image:'/post_preview/post-image.png')}}"> </div>
<div class="m-b-10">
<a id="upload-submit" class="btn btn-warning btn-block btn-sm" onclick="file.click();"><i class="fa fa-upload"></i> Upload Picture </a>
{{ Form::file('preview_image', ['class'=> 'btn btn-warning btn-block btn-sm','id'=>'file','style'=>'visibility:hidden']) }}
</div>
</div>
the controller:
public function create()
{ $this->authorize('create', Post::class);
return \View::make('posts.edit')
->with('posts', new \App\Models\Post);
}
and the model:
class Post extends Model
{
const DEFAULT_PREVIEW_IMAGE = "post_preview/post-image.png";
/**
* get preview image
* #return mixed|string
*/
public function getPreviewImage()
{
return $this->show_preview_image?$this->preview_image:static::DEFAULT_PREVIEW_IMAGE;
//return $this->preview_image;
}
}
I tried to add multiple extensions like jpg, jpeg or gif in the model but the problem persists

Answer 1

For laravel images should be stored in storage folder or you can create a folder inside storage folder. You also need to create symbolic link
php artisan storage:link
Here is how to upload the file to the storage folder
if ($request->hasFile('file_name')) {
$file = $request->file('file_name');
$fileName = str_replace(' ', '-', $file->getClientOriginalName());
$uploadPath = storage_path('app/public/folder_name');
$path = $request->file('file_name')->move($uploadPath, $fileName);
$uploadPathFile = $fileName;
}
Then you save the path to your DB.
For showing the image in the blade
<img src="/storage/folder_name/{{$data->image}}" alt="No image available" class="img-thumbnail">
Here $data->image is only the path

Answer 2

is your image stored in a public directory - try accessing the URL in your browser to see if the response is the expected image.
If not please provide more details how are you trying to retrieve the image (via binary response or stored as a public asset)?