Return Response Image in Laravel 7

user_4480164 0
Viewed 1350

I'm trying to create a mini random image generator, as a start I've tried :

Route::get('/img/UoJb9wl.png','Image@random');

All I did is to return this

return '<img src="/assets/fe/img/welcome.jpeg" alt="Smiley face" width="200">';

Then, I tested on the live site :

I see the image loaded if I go to the URL

https://www.bunlongheng.com/img/UoJb9wl.png

enter image description here

If I imported on a site like JSFiddle like this

<img src="https://www.bunlongheng.com/img/UoJb9wl.png">

I can't see it.

Why ?

Edit

Try #2

return env('APP_URL').'/assets/fe/img/welcome.jpeg';

I return image path now

But I still nothing rendering in my JSFiddle still

<img src="https://www.bunlongheng.com/img/UoJb9wl.png">

laravel-5 laravel-7 laravel image php
5 Answers

That doesn't work because your controller returns not an image, but an HTML code.

When you use this address in your browser, it sends request to your server, server responds with HTML which contains <img src="..."/> with link to the actual image, so browser shows it.

When you try to use the same address in the <img src="..."/>, your server still returns HTML code which is not an image, so obviously it won't be shown.

  1. You can always serve the image itself:
function random()
{
  return response()->file(/* path to image file */);
}
  1. You can check Accept header to determine what to respond:
function random(Request $request)
{
  $accept = $request->header('Accept');
  if (strpos($accept, 'text/html') !== false) {
    return response()->html('<img ...');
  } elseif (strpos($accept, 'image/') !== false) {
    return response()->file(...);
  }
  abort(403, 'No content for requested type');
}
user_5349430

Your route /img/UoJb9wl.png is actually returning /assets/fe/img/welcome.jpeg which is exactly as expected.

Your img tag won't work as you aren't requesting a picture, you are requesting a route which returns another img tag with the actual location of the image.

user_153308220
user_113261820

This is not working just because of the returning image source <img src="/assets/fe/img/welcome.jpeg" alt="Smiley face" width="200"> is not available on your JSFiddle, even it will not work on any other website because no one have the image on this relative path /assets/fe/img/welcome.jpeg. If you want to really do that you have to specify the full absolute path. <img src="https://www.bunlongheng.com/assets/fe/img/welcome.jpeg" alt="Smiley face" width="200">.

So your return statement could be.

return '<img src="env('APP_URL')/assets/fe/img/welcome.jpeg" alt="Smiley face" width="200">';

Or whatever you think is good to specify the absolute path.

Further Explanation

I have checked on the JSFiddle source code, you are using this link https://www.bunlongheng.com/img/UoJb9wl.png in the image src tag. It will not work at all if you even specify the absolute path.

<img src="https://www.bunlongheng.com/img/UoJb9wl.png">

When browser will try to populate the src tag it will send request to https://www.bunlongheng.com/img/UoJb9wl.png and the response code is <img src="/assets/fe/img/welcome.jpeg" alt="Smiley face" width="200"> so browser will populate it like this.

<img src="<img src="/assets/fe/img/welcome.jpeg" alt="Smiley face" width="200">">

So you have to return only the image path in the request, if you want to use this route in the image's src.

return env('APP_URL')."/assets/fe/img/welcome.jpeg"

If you want to keep your return statement same with image tag, then you can't use that route in image's src. Just use in the div or any other html tag.

user_27699170

I checked your URL using Postman and somehow it's showing a 404 error code even though it's outputting the actual URL.

Also, if you're using it directly, it should return an actual image.You could try this:

return response()->file('/assets/fe/img/welcome.jpeg');

user_73246300
Related