如何将Laravel存储的电商商品图片在Angular前端正常展示

问题核心原因 #

你当前使用本地磁盘文件路径作为图片src，浏览器出于安全限制禁止直接访问客户端本地文件系统路径，因此无法加载图片。

解决方案 #

1. Laravel后端配置（推荐优化） #

你存储的图片位于Laravel的public目录下，该目录本身就是web可访问的根目录，只需要保证前端拿到的图片路径是Laravel服务的可访问URL即可：

• 先在.env文件中修改APP_URL为你的Laravel服务实际运行地址，比如本地开发场景为：

  APP_URL=http://localhost:8000
  

• 在Product模型中添加img字段的访问器，直接返回完整的图片访问URL，避免前端拼接出错：

  public function getImgAttribute($value)
  {
      return env('APP_URL') . '/uploads/books/' . $value;
  }
  

2. Angular前端修改 #

• 如果你已经完成上述Laravel端优化，直接使用接口返回的img字段即可：

  <td><img [src]="product.img" class="w-100" alt="商品图片"></td>
  

• 如果你暂时不想修改Laravel端代码，直接把src前缀替换为你的Laravel服务地址即可：

  <td><img [src]="'http://localhost:8000/uploads/books/' + product.img" class="w-100" alt="商品图片"></td>
  

优化提示：可以把Laravel服务地址存入Angular的environment环境变量中，后续修改部署地址时无需逐个修改页面代码

3. 异常排查 #

如果修改后仍无法加载，按以下步骤排查：

• 把拼接好的图片地址直接复制到浏览器地址栏访问，若无法打开，检查图片是否真的存在于public/uploads/books目录下、Laravel服务地址是否正确、public目录权限是否正常
• 若直接访问地址可以打开，检查Angular端拼接的路径是否和实际访问路径一致，若存在跨域问题，在Laravel端配置CORS规则允许Angular域名访问即可。

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