Image is not displayed from public directory Laravel

@rehman_ali I suggest you look at the generated html from this code.

<img src="{{asset('storage/students/'. $members['image'] )}}" width="300" height="300">

My guess is that $members['image'] is null.

@Tray2 I have echo that and $members['iamge'] is not null. It is getting name of file that is stored at directory.

@rehman_ali Show the generated html from both the working one and the not working one.

@Tray2 This code is displaying image:

<img src="{{asset('storage/students/1663752856.png' )}}" width="300" height="300">

These code tried separately are not displaying image although all are in same directory

<img src="{{asset('storage/students/'. $members['image'] )}}" width="300" height="300">
<img src="{{asset('storage/students/1663673072.png' )}}" width="300" height="300">

@rehman_ali No it's not. I asked for the generated html, not the php code that you shown.

ID Card

            <div class="font">
                <div class="top">
                    <!-- Not working
                    <img src="{{asset('storage/students/'. $members['image'] )}}" width="300" height="300"> -->
                    <!-- Working -->
                    <img src="{{asset('storage/students/1663752856.png' )}}" width="300" height="300">
                    <!-- Not working
                    <img src="{{asset('storage/students/1663673072.png' )}}" width="300" height="300"> -->


                    
                </div>

@rehman_ali No.

This is what I want to see

<img class="w-full" src="/assets/images/two_table_with_relation.png" alt="Two tables with relation">

Not your php code, but the actual html for that element.

@Tray2 This is the actual code that I shared and this is it for displaying image. I don't know if it is fine since it was working on previous system so I though its good to go. I am using. Above that is body tag and title and HTML tag that is not relevant to this issue I think.

@rehman_ali see the image when you type the url in browser ?

http://your-domain/storage/students/1663673072.png

actually @tray2 asking the rended html code, right click on the element in web browser, select inspect

then web browser will highlight the element, right click on it select copy > outter html and paste here

@Tray2

<img src="http://localhost:8000/storage/students/1663674990.png" width="300" height="300">

@newbie360 Got is

http://localhost:8000/storage/students/1663752856.png  (Image is displayed}

Image is not Displayed

http://localhost:8000/storage/students/1663673072.png

Although both are in same folder and names are correct I have double checked. Why is that?

@rehman_ali can you check again this file is exists ?

your-project\storage\app\public\students\1663673072.png

@newbie360 Yes I have checked both files (one image that is showing and the other that is not showing are there)

@rehman_ali this weird... most of user asking about can't show image in storage is

Forgot to use command

php artisan storage:link

The storage:link command will pointing the path

your-project\public\storage

to

your-project\storage\app\public

The files actually is stored in

your-project\storage\app\public

@newbie360 So what is the solution. I am also tired searching it like its been hours and this issue is not solved. I have already run that storage link command.

@rehman_ali What does the dev tools tell you when it tries to load the image?

@Tray2 Failed to load resource: the server responded with a status of 404 (Not Found) I am a beginner so I don't know a lot about dev tools. This is the error in console page shows 404

@rehman_ali hmmm try to make it more simple

if you are use M$ Windows, open File Explorer, go to your-project\storage\app\public\students Press F5(refresh) check again all files name is correct

manualy put two files and name it to a.jpg, b.jpg

your-project\storage\app\public\a.jpg
your-project\storage\app\public\students\b.jpg

hardcoded this code in your blade file

<img src="/storage/a.jpg">
<img src="/storage/students/b.jpg">

can you see a.jpg and b.jpg, reply here

@rehman_ali oh 404 means the file not exists

@newbie360 Its showing 404 for both. I have checked the console. Why is that?

@rehman_ali it means the storage hard linking not work, the web server is inside virtual machine ?

open File Explorer go to your-project\public double click on the storage, the actual path now is in your-project\storage\app\public ??

if File Explorer report error, so the storage hard linking is incorrect

@newbie360 I am using phpmyadmin and Xampp for it. I did not get the 2nd point. I have both directories separately like gymsystem\public\storage\students and gymsystem\storage\app\public\students (Images are auto-stored here when form submits and I am trying to retrieve from here)

@rehman_ali yes both path is correct

open File Explorer go to your-project\public can you see a file called storage (this actually isn't a shotcut / folder)

double click on the storage, now you will redirect to your-project\storage\app\public right?

@newbie360 There is a folder named storage but NOT A FILE named as storage as you say there will be a file.

@rehman_ali yes, it means the hard linking incorrect, delete the storage folder in your-project\public or move to other location for backup

Run any console with administrator permission, go to your-project folder type

php artisan storage:link

now double click on your-project\public\storage , it should redirect to your-project\storage\app\public

if you want to know more about Symbolic link

https://en.wikipedia.org/wiki/Symbolic_link

@newbie360 Finally this solved the problem. Thank you so much for all the assistance, help, and coordination. Can't Thank you enough for all the guidance. It cleared my many confusions and gave me a border perspective to solve certain problems.

@rehman_ali just incase someone read this in the future

the Laravel source code of the command php artisan storage:link is here

https://github.com/laravel/framework/blob/9.x/src/Illuminate/Filesystem/Filesystem.php#L329

    /**
     * Create a symlink to the target file or directory. On Windows, a hard link is created if the target is a file.
     *
     * @param  string  $target
     * @param  string  $link
     * @return void
     */
    public function link($target, $link)
    {
        if (! windows_os()) {
            return symlink($target, $link);
        }

        $mode = $this->isDirectory($target) ? 'J' : 'H';

        exec("mklink /{$mode} ".escapeshellarg($link).' '.escapeshellarg($target));
    }

In MS Windows create a Symbolic link require administrator permission

mklink [[/D] | [/H] | [/J]] "link" "to target"