Laravel 5.4 show uploaded image issue

Question

I'm learning Laravel 5.4 and for now I'm trying to upload image and show uploaded image in html.

It seems files are uploaded successfully but when I want to show the image in Html, there's 404 error for images and nothing will display.

This is my settings and code:

  public function store(Request $request)
    {
        $this->validate($request, [
            'name'  => 'required|string|max:255',
            'desc'  => 'required|string',
            'width' => 'required|numeric',
            'height'=> 'required|numeric',
            'artist'=> 'required|exists:artists,id',
            'photo' => 'required|file'
        ]);

        $artistInfo = Artist::find($request->artist);

        $fileExtension = $request->file('photo')->extension();

        $originalFileName = $request->file('photo')->getClientOriginalName();

        $filePath = Storage::putFile('public', $request->file('photo'), 'public');


        Photo::create([
            'name'      => $request->name,
            'origName'  => $originalFileName,
            'url'       => $filePath,
            'artist_id' => $request->artist,
            'desc'      => $request->desc,
            'width'     => $request->width,
            'height'    => $request->height
        ]);

        return $filePath;//this for test
    }

And my Blade:

                @forelse($photos as $photo)
                    <tr>
                        <td>{{ $photo->name }}</td>
                        <td>
                            <img class="img" src="{{ asset( 'public/storage/' . $photo->url) }}" alt="{{ $photo->name }}" /></td>
                        <td>{{ $photo->artist->name . ' ' . $photo->artist->family }}</td>
                        <td>{{ $photo->desc }}</td>
                        <td>{{ $photo->width }}</td>
                        <td>{{ $photo->height }}</td>
                        <td class="text-center">
                            <a href="{{ route('artists.edit', ['id' => $photo->id]) }}">
                                <i class="material-icons">edit</i>
                            </a>
                        </td>
                        <td class="text-center">
                            <a href="{{ route('artists.edit', ['id' => $photo->id]) }}">
                                <i class="material-icons">assignment_turned_in</i>
                            </a>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td>There's no photo Yet</td>
                        <td>&mdash;</td>
                        <td>&mdash;</td>
                        <td>&mdash;</td>
                        <td>&mdash;</td>
                    </tr>
                @endforelse

NOTE :

I made a symbol link to my public folder using php artisan storage:link and symlink works fine...

I changed this line in blade:

<img class="img" src="{{ asset( 'public/storage/' . $photo->url) }}" alt="{{ $photo->name }}" /></td>

and tried these manners:

 <img class="img" src="{{ asset(storage_path() . ($photo->url)) }}" alt="{{ $photo->name }}" /></td>


 <img class="img" src="{{ storage_path() . ($photo->url) }}" alt="{{ $photo->name }}" /></td>

$photo->url has image filename for example jDHPOTh7iejFABANSzasNbBWJ09DqLbqJb8ymJhv.png

Would you please let me know which part is my problem?

Thanks in Advance

UPDATE :

I'm using PhpStorm Ide and when I download my public folder to my project -or synchronize this- my symbol link does not appear in public folder list...

This is ls from my public folder :

And this is my phpStorm project view AFTER download a fresh copy of public folders in my host:

And as a note : I started to develop this website in windows at first and then I did move entire project to my linux remote server...

I think this could work as you are trying to get the path using the generated id `{{ storage_path($photo->url) }} ` — linktoahref, Apr 24 '17 at 08:42

score 1 · Answer 1 · edited May 23 '17 at 12:18

1

For anyone looking for answer to this question, please follow this link contains great answer

https://stackoverflow.com/a/30191854/417899

edited May 23 '17 at 12:18

Community

1
1

answered Apr 30 '17 at 04:39

cyberfly

5,568
8
50
67

Kiyarash · Accepted Answer · 2017-05-02T11:53:52.570

Thanks to all for participating, but in my case there was a tricky issue...

I was logged in to my server using root and when I did type php artisan storage:link, the symbol link was made by root as owner and it seems Apache didn't have permission to access this symbol link and because of that, the files was not accessible in http.

SOLUTION

I have a vds that serve 5 different websites, so I did simply change the owner of symbol link's owner to my relative username and the problem solved...

chown -R usergroup:username /path/to/link

That's it...

Mayank Pandeyz · Answer 3 · 2017-04-24T08:45:58.163

0

I think the issue is here:

$filePath = Storage::putFile('public', $request->file('photo'), 'public');

here you are putting your file on public folder and here:

<img class="img" src="{{ asset( 'public/storage/' . $photo->url) }}" alt="{{ $photo->name }}" /></td>

you are trying to get it from public/storage/. So change the path like:

<img class="img" src="{{ asset( 'public/' . $photo->url) }}" alt="{{ $photo->name }}" /></td>

and try again.

Note: Here uploaded images path is stored in public/image.extension, so fetching it from the same public directory

edited Apr 24 '17 at 08:45

answered Apr 24 '17 at 08:35

Mayank Pandeyz

25,704
4
40
59

Thanks for your answer, but what's your suggestion? I tried so many different manner... – Kiyarash Apr 24 '17 at 08:42

Laravel 5.4 show uploaded image issue

3 Answers3