Laravel Storage返回图片链接 Angular前端img无法正常加载

问题核心 #

你返回给前端的是服务器本地磁盘绝对路径，不是浏览器可识别的HTTP访问地址：

• 你在本地浏览器地址栏直接输入C:\xampp\htdocs\...这类路径能打开，是因为浏览器直接读取了你本地电脑的磁盘文件
• 前端页面里img标签加载资源时，只能通过HTTP/HTTPS协议请求web服务暴露的资源，出于安全限制，网页无权直接访问服务器或用户设备的本地文件系统，所以这类本地路径必然加载失败。

不管你最初用的Storage::disk('public')->path()还是后来换的public_path()，返回的都是服务器本地磁盘路径，本质问题没有解决。

解决流程 #

1. 先创建存储软链接，把存储目录映射到web可访问路径
   Laravel自带命令完成这个映射，在项目根目录执行：

   php artisan storage:link
   

   执行成功后，storage/app/public目录下的所有文件，都会被映射到项目public/storage路径下，可以通过web地址直接访问。
2. 修改控制器中生成链接的逻辑，返回HTTP可访问URL
   把show方法里生成链接的代码替换成以下任意一种写法即可：

   // 写法1：用Storage facade的url方法，推荐
   foreach ($destination_images as $destination_image) {
       $link = Storage::disk('public')->url($destination_image->img);
       array_push($urls, $link);
   }
   

   // 写法2：用asset助手生成带域名的完整URL
   foreach ($destination_images as $destination_image) {
       $link = asset('storage/' . $destination_image->img);
       array_push($urls, $link);
   }
   

3. 验证返回结果
   修改后接口返回的链接格式应该类似：

   [
       "http://localhost/rindextwo/storage/destination-F2QSioUxe2.jpeg",
       "http://localhost/rindextwo/storage/destination-vRvimgsiMJ.png"
   ]
   

   这类HTTP地址直接放到img标签的src属性中即可正常加载。

注意事项 #

• 如果前后端分离部署，确保生成链接使用的域名和后端API域名一致，避免出现跨域或资源404问题
• 如果执行storage:link后还是访问404，检查web服务器（Apache/Nginx）的站点根目录是否正确指向Laravel项目的public文件夹

浏览器资源检查截图

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