Angular Frontend display Laravel backend stored image

Question

I want to display image in frontend (Angular).But that image stored in Laravel(5.5) backend.I already try.What should i do?

This is error

backend/public/admin//images/uploads/image.extention this is the path. — RuwanthaSameera
– RuwanthaSameera, Commented Dec 18, 2018 at 10:54
@RuwanthaSameera As per the console log you are missing the file extension. Seems beer.image doesn't include extension. — Saumini Navaratnam
– Saumini Navaratnam, Commented Dec 18, 2018 at 12:00
if your backend url is localhost:8000, then images will be at localhost:8000/admin/images/uploads — Skid Kadda
– Skid Kadda, Commented Dec 18, 2018 at 13:00

Shahid Neermunda · Accepted Answer · 2018-12-18 12:33:05Z

2

If your image stored in Storage folder of Laravel.Then create this route in route route.php (if your using above Laravel 5.4, in web.php)

Route::get('images/{filename}', function ($filename)
{
    $file = \Illuminate\Support\Facades\Storage::get($filename);
    return response($file, 200)->header('Content-Type', 'image/jpeg');
});

Now you can load your image using this route like this.

<img src="websiteurl/images/filename.jpg"/>

If image stored in public folder, you can load it directly

   <img src="websiteurl/admin/images/uploads/filename.jpg"/>

You need to run both of your Laravel(Backend) and Angular(Frontend) Application same time (based on your code)

edited Dec 18, 2018 at 12:33

answered Dec 18, 2018 at 12:26

Shahid Neermunda

1,3671 gold badge14 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Dan · Accepted Answer · 2018-12-18 11:09:22Z

0

The storage_path()

function returns the fully qualified path to the storage directory:

$path = storage_path();

Then:

<img src="{{$path}}/{{beer.image}}.ext">

or

<img src="{{storage_path()}}/{{beer.image}}.ext">

Is probably better practice. You also need the file extension.

answered Dec 18, 2018 at 11:09

Dan

929 bronze badges

Collectives™ on Stack Overflow

Angular Frontend display Laravel backend stored image

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related