React无法显示Laravel Storage中图片的问题求助

问题根源 #

React构建时会解析静态资源的导入路径，但动态拼接的相对路径不会被webpack处理，所以直接用../../../../../storage/images/${el.image}这种方式找不到资源；而直接导入的路径会被webpack转换为打包后的正确地址，因此能正常显示。

可行解决方案 #

1. 先配置Laravel的存储软链接 #

Laravel的storage目录默认无法直接通过前端访问，需要创建软链接到public目录：

php artisan storage:link

执行后，storage/app/public/images下的图片就能通过http://你的域名/storage/images/图片名访问。

2. 前端使用完整URL拼接 #

放弃相对路径，直接拼接后端域名+存储路径：

// 示例：假设Laravel后端运行在http://localhost:8000
const imageSrc = `http://localhost:8000/storage/images/${el.image}`;

将这个imageSrc传给AllItem组件的img标签src属性即可。

3. 后端返回完整图片URL（更优雅） #

在Laravel的Item模型中添加访问器，自动生成完整URL：

// app/Models/Item.php
public function getImageUrlAttribute()
{
    return asset('storage/images/' . $this->image);
}

然后在返回items数据时，把image_url字段一起返回给前端，前端直接使用该字段作为图片src：

const imageSrc = el.image_url;

4. 验证步骤 #

• 先在浏览器地址栏输入拼接好的图片URL，确认能正常显示，排除后端路径问题。
• 通过浏览器开发者工具查看img标签的src属性，确认渲染的路径正确。

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