如何在React前端展示存储在Laravel后端文件夹中的图片

• 首先修正资源访问路径
  Laravel 对外暴露的 web 根目录默认是项目的public文件夹，访问静态资源时不需要在 URL 中额外添加/public段，你当前的代码可以修改为：

<img src="http://localhost:8000/avatar/images.png"/>

修改后先直接把路径复制到浏览器地址栏访问，确认可以正常打开图片即可。

• 确认文件存储路径匹配
  确保你的图片文件实际存放在 Laravel 项目的public/avatar/目录下，如果你把图片存在了storage/app/public/avatar/目录下，需要先执行 Artisan 命令创建软连接：
  php artisan storage:link
  执行完成后对应的访问路径改为：

<img src="http://localhost:8000/storage/avatar/images.png"/>

• 检查服务配置
  如果你本地用 Nginx/Apache 运行 Laravel 项目，需要确保站点根目录配置指向项目的public文件夹，而不是 Laravel 项目的根目录，否则也会出现静态资源路径异常的问题。如果用的是php artisan serve启动的本地开发服务，不需要额外配置。
• 优化配置避免硬编码
  建议把后端服务域名存到 React 的环境变量中，示例写法：

<img src={`${process.env.REACT_APP_API_URL}/avatar/images.png`} alt="用户头像"/>

方便后续部署上线时统一修改域名配置。

注意：如果路径正确但返回403错误，需要检查public/avatar目录及内部文件的读写权限，确保运行web服务的用户有文件读取权限

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