Storage Image file is not showing on the browser

Level 58

It seems like you're having trouble displaying an image stored on your server in the browser. There could be several reasons why the image is not showing up. Here are a few things you can check and try to resolve the issue:

Correct File Path: Ensure that the path to the image file is correct. If you're using Laravel, and the image is stored in the storage/app/public directory, you need to create a symbolic link to the public directory using the php artisan storage:link command. This will make the files in storage/app/public accessible from the public directory.
File Permissions: The image file should have the correct permissions to be readable by the web server. You can set the permissions using the chmod command in the terminal.
Correct Headers: Make sure that the server is sending the correct content-type header for the image. For example, for a PNG image, the header should be image/png.
File Exists: Double-check that the image file actually exists at the specified path and that there are no typos in the file name.
HTML Tag: If you're using an <img> tag to display the image, ensure that the src attribute is set correctly.

Here's an example of how you might display an image stored in the storage/app/public directory in a Laravel application:

// After running `php artisan storage:link`
// Your image might be accessible through the 'storage' folder in the public directory

// In your Blade template:
<img src="{{ asset('storage/image-name.png') }}" alt="Description of image">

If you're still having trouble, please provide more details about how you're trying to display the image, including any relevant code snippets, so that we can offer more targeted assistance.

Level 29

Add the code you're using to display the image.

Level 2

@gych this code is showing on live host but in localhost the image is not showing {{ asset('storage/'.$general_settings->site_logo) }}

Level 29

@jcoder02k Check via command terminal if the symbolic link exists

On windows navigate in the terminal to the public folder and run dir from the terminal

On linux navigate in the terminal to the public folder and run ls -l

Level 2

@gych yes the image exist when I check via terminal even on file explorer

Level 29

@jcoder02k Check and confirm with the commands if the symbolic link exists, the link between the storage and public folder

martinbean

Level 80

Why the image is not showing on the browser?

@jcoder02k Dunno, mate. We can’t see your screen.

Level 2

@martinbean pls. see updated info above

martinbean

Level 80

@jcoder02k Check the image actually exists.

Snapey

Level 122

@jcoder02k and when checking the file exists, also check the lettercase of path and filename

Level 2

@martinbean yes it exist just not showing on the browser and got 404 error

Snapey

Level 122

@jcoder02k show here (paste actual data)

a directory listing of the public/storage/image folder
a section from the view source in your browser where the image should be displayed.

(from the production server obviously)

Level 2

@Snapey yes the file exist and the path is correct as this is working on live host only on my localhost the image got 404 error

jcoder02k@LAPTOP-MQ10GL0C:~/www/laravel/public/storage/image$ ls
site-favicon.png  site-logo-darkmode.png

view source

  <div class="container text-center">
        <div  class="antialiased">
            <img src="http://localhost/storage/image/site-logo-darkmode.png" alt=laravel" class="self-center pulse-image" type="image/png"/>
        </div>
    </div>

this is showing on production site but not on localhost browser

Snapey

Level 122

@jcoder02k ok. you've outlasted my patience. Good luck

1 like

Level 2

@Snapey I update my answer cause i just read your message

nelson_mutane

Level 1

@jcoder02k easy just update you env file:

APP_URL=https://site.com
to 
APP_URL=http://localhost #http://localhost:8000

Level 2

@nelson_mutane btw this is my current app url on my local host APP_URL=http://localhost and this is the url that load the page but not the image from storage

Level 29

@jcoder02k Try to change your APP URL to http://localhost:8000

Level 2

@gych i try this http://localhost:8000 but the page don't even load

Level 29

@jcoder02k Since your image is available in the public folder you could try to directly use the img path without the asset() helper

For example

<img src="/storage/image-name.png">

Level 2

@gych but i have this "{{ asset('storage/'.$general_settings->site_logo) }} as I fetch image that I upload from my dashboard.

All the image I use are from my dashboard that I upload

Level 29

@jcoder02k Then you can try this

 <img src="/storage/{{ $general_settings->site_logo }}">

Level 2

@gych all image from storage are not working i try them both

<img src="/storage/image-name.png">
<img src="/storage/{{ $general_settings->site_logo }}">

<img src="/site-logo-darkmode.png"/> // this one work

Level 29

@jcoder02k What is the actual value of $general_settings->site_logo ?

Level 2

@gych this url http://localhost/storage/image/site-logo-darkmode.png