如何在Laravel中使用HTML <img src>标签正确显示图片？

Hey there, let's break down why your images aren't loading and how to fix it—this is a super common gotcha with Laravel's storage system!

First off, Laravel does allow direct src links—the issue is almost always related to path configuration or the storage symlink setup. Let's go through the key checks and fixes:

1. Verify the Storage Symlink is Correctly Created #

Laravel stores public assets in storage/app/public, but to make these accessible via the web, you need a symbolic link from your public directory to this folder.

You mentioned running a "system link command"—but make sure you're using Laravel's built-in artisan command, which handles this properly:

php artisan storage:link

• After running this, check your project's public folder—there should be a storage folder that links to ../storage/app/public.
• If you previously created a manual link or it's broken, delete the existing public/storage folder first, then re-run the command.

2. Use the Correct Frontend Path #

Your image is stored in storage/app/public/photos/, so the web-accessible path should point to the symlinked public/storage folder. The correct src attribute is:

<img class="card-img-top" src="/storage/photos/{{$photo}}" alt="Card image cap">

• Notice the leading /—this ensures it's an absolute path from your web root, avoiding issues if your page is in a subdirectory.
• Your previous attempts were pointing to internal storage paths (storage/app/public/...) which aren't directly accessible via the browser, or missing the photos/ subdirectory in the second try.

3. Double-Check Image Location and Filename #

• Confirm the image file actually exists at storage/app/public/photos/{{$photo}} (replace {{$photo}} with the actual filename to test).
• Pay attention to case sensitivity—Linux servers treat MyPhoto.jpg and myphoto.jpg as different files.

4. Check Directory Permissions #

Ensure the storage and public/storage directories have proper read permissions for your web server. On Linux-based systems, you can set this with:

chmod -R 755 storage/
chown -R www-data:www-data storage/  # Replace www-data with your web server user if needed

If you follow these steps, your images should load correctly. Let me know if you hit any snags!

内容的提问来源于stack exchange，提问作者seamus