Image not displaying in view. Laravel

Question

In my Laravel project I'm trying to load an image into my view using blade but it displays as a broken link. I inspect it with firebug and the src is pointing to the image but nothing is displaying.

My image is located in my project's public/images/users/3/profilePictures/

Here is my <img> in the view.blade.php

<img class="com-profile-picture" src="images/users/{{ $follower->id }}/profilePictures/50thumb-{{ $follower->profilePicture->url }}" alt="{{ $follower->first_name }}&nbsp;{{ $follower->last_name }} Profile" width="50" height="50">

However I get this when I load the page:

When I inspect the image with firebug I see this:

That is the correct src and the image does exist in my public/images/users/3/profilePictures/ directory

Anyone know why this is happening?

Unsociable

src of firebug html & code different, html says, ../users/3.., but u say correct src is ../users/2.. – Surveillance

ah, miss type on my question, I'm still experiencing the same problem. – Unsociable

Answer 1

This may be caused you are in a route which does not represent the base URL. You should generate the URL for your assets relative to the public/ folder. Use URL::asset('path/to/asset') to generate the URL.

{{ URL::asset("images/users/{$follower->id}/profilePictures/50thumb-{$follower->profilePicture->url}") }}

Or as @lukasgeiter mentioned you can simply use asset('path/to/asset') helper.

Ytterbite

Thank you very much @Ytterbite and lukasgeiter – Unsociable

This is just save my life :D – Allophane

Answer 2

You can try with the

php artisan storage:link

else you can use this

A simple fix for the issue (linked broken error) in .env file

APP_URL=http://localhost

this replace with the

APP_URL=http://localhost:8000

then the issue will be fixed.

Laveralavergne

Sometimes when you run more than one project and localhost:8000 is already in use, remember that if you use localhost:8001 your images might not be visible. You will have to change APP_URL=localhost:8000 to APP_URL=localhost:8001 – Mongoose

Answer 3

delete already generated symlink and then run this command

php artisan storage:link

Thermonuclear

Answer 4

This is a very old question but here is the answer for new developers who might face the same issue

1. Delete the existing storage symilnk by simply deleting the "storage" link from the public folder,
2. check for the APP_URL variable in .env (it should be exactly the same as your current project URL including port i.e APP_URL=HTTP://localhost:8000
3. Run the artisan command "php artisan storage:link"

This must resolve your issue, if it doesn't please message me I'll help you debug it.

Sweetener

Answer 5

if you are using laravel, consider excluding public folder or any folder where your public files are store in .htacccess from folders that laravel control.

Do it like this in .htaccess

# Exclude directory from rewriting RewriteRule ^(public/) - [L]

Mafaldamafeking

Answer 6

Storage location before (Not Working) :

<img src="{{asset('storage/app/public/media/productImages/'.$list->image)}}" alt="" srcset=""> 

Working storage location :

<img src="{{asset('storage/media/productImages/'.$list->image)}}" alt="" srcset="">

Else try :

1. Deleting all the linked/shortcut folders created in public folder
2. Then recreating the link by running :

php artisan storage:link

Napoli

Answer 7

Goto public Folder

Delete the storage shortcut Then create Another shortcut for storage Folder Create Shortcut Storage Folder Then run php artisan storage:link

Sholley