guezandy's avatar

Get image from s3 display in blade using L5.1

Hey y'all

I was able to upload an image to s3 using:

\Storage::disk('s3')->put('NEW_FILE_PATH', file_get_contents($file));

I can go on my s3 dashboard and I see the image file there.

Not sure how to download that image and display in on blade view file.

Do I use:???????

$pic = \Storage::disk('s3')->get('PATH_TO_FILE');

In my controller and pass it as:????????

return view('home')->with('pic', $pic);

and then how do I access it in blade

<img src="{!! $pic !! }> 

Doesnt work.

ANY ADVICE?

0 likes
10 replies
pmall's avatar

You are putting the content of the image in the tag. You have to put the s3 url of the image (your_s3_url/PATH_TO_FILE)

guezandy's avatar

@pmall hey thanks for the reply, i tried that but maybe i wasn't doing it correctly whats the format of the s3 url I tried:

            $bucket = env('AWS_BUCKET');
            /* Set file key */
            $key = PATH_TO_FILE; 
            /* Build & push s3 url into array */
            $file['url']= 'https://s3.us-east-1.amazonaws.com/'.$bucket.'/'.$key;
            $profile_pic = \Storage::disk('s3')->get($file['url']);

I get this error:

FileNotFoundException in FilesystemAdapter.php line 58:
https://s3.us-east-1.amazonaws.com/BUCKET_NAME/PATH

@kayyyy I tried what yuo said, got the same error as above.

guezandy's avatar

Also @kayyyy & @pmall what really puzzles me is how to display the image (once I get it store in a variable in the controller) in the blade template.

Any advice on that?

pmall's avatar

You want to display the image but you are trying to get the content of the image in order to do this. When you want to show http://example.com/foo.jpg do you try to get the content of the file before displaying it ? No you just put <img src="http://example.com/foo.jpg">. It is the same for your s3 account, forget about the filesystem, if you want to display an image stored in your s3 just put its url in a img tag.

tonym's avatar

As @pmall said you have to reference the URL in the image source and not download the image as you are trying to do.

What I do is create an image config file in the config directory and name it image (or whatever makes sense to you). In this file I then create all the properties for my images. So for example my file might look like this:

return [
'url' => [
        'original'  => "https://s3-eu-west-1.amazonaws.com/bucketname/original/",
        'thumb' => "https://s3-eu-west-1.amazonaws.com/bucketname/thumbs/",
        'main' => "https://s3-eu-west-1.amazonaws.com/bucketname/main/",
        'carousel' => "https://s3-eu-west-1.amazonaws.com/bucketname/carousel/",
        ],
'bucket' => [
        'original' => "original",
        'thumb' => "thumbs",
        'main' => "main",
        'carousel' => "carousel",
        ],
'size' => [
        'thumb' => 175,
        'main' => 650,
        'carousel' => 150,
        ]
]

So then in my view if I want to reference a thumbnail I do this:

<img src="{{ config('image.url.thumb').$item->image_name }}">
Hlaing Tin Htun's avatar
    $picpath = $pic->download_url;
        $thumbnail ='<img src='.$picpath.' alt="" width="50" height="50">';
        header("Content-Type: image/jpeg");
        echo $thumbnail."<br>";
        echo $pic->storage_file_name;

When I put like this.

Hlaing Tin Htun's avatar

Result is here https://developer-exam.s3.amazonaws.com/8734566A2.jpg alt="" width="50" height="50"> 8734566A2.jpg At first, it appear pictures. Later just link url appeared. What should i do @pmall

itxshakil's avatar

You can add an accessor like follow to get Image URL

It returns URL to the image and you can access it by $profile->image

public function getImageAttribute($value)
{
    if ($value) {

        return Storage::disk('s3')->url($value);
    }

    return "https://source.unsplash.com/96x96/daily";
}

I assume you save image as follow

$path = $request->file('image')->store('images', 's3');
        
Storage::disk('s3')->setVisibility($path, 'public');

$profile->update([
      'image' =>  $path
      ]);

You can check this commit for more detail

https://github.com/itxshakil/ediary/commit/23cb4b1cb7b8a4eac68f534e8c5b6897abc6421a

Please or to participate in this conversation.