CODEWITHSUNDEEP
phplaravellaravel-5.3
Kiyarash
Kiyarash

Reputation: 2608

Laravel 5.4 show uploaded image issue

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 :

list of folders in public

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

Folder list inside my IDE

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...

Upvotes: 2

Views: 3127

Answers (3)

Kiyarash
Kiyarash

Reputation: 2608

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...

Upvotes: 1

cyberfly
cyberfly

Reputation: 5888

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

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

Upvotes: 1

Mayank Pandeyz
Mayank Pandeyz

Reputation: 26288

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

Upvotes: 0

Related Questions