Next.js对接Laravel API图片不显示（路径配置无误）

核心问题分析 #

1. Laravel 图片存储路径不在可公开访问的目录下
2. Next.js 中图片 URL 拼接错误

解决步骤 #

1. 调整 Laravel 图片存储目录（关键） #

Laravel 默认仅storage/app/public目录下的文件能通过storage:link生成的链接公开访问。你当前将图片存在storage/app/products，该目录无法直接通过 Web 访问。

修改上传逻辑，把图片存储到storage/app/public/products目录：

// Laravel 上传示例代码
$path = $request->file('image')->store('products', 'public');
// 数据库存储的 image 字段值依然是 products/xxx.jpg，无需修改

2. 修正 Next.js 图片 URL 拼接 #

在ProductFeed.js中，替换注释掉的错误路径，使用正确的公开访问地址：

{data.map(({ id, title, price, description, category, image }) => (
    <Product 
        key={id}
        id={id}
        title={title}
        price={price}
        description={description}
        category={category}
        image={`http://localhost:8000/storage/${image}`} // 去掉多余的/app路径
    />
))}

3. 验证跨域配置（可选） #

若图片仍无法加载，检查 Laravel 的 CORS 配置，确保允许 Next.js 域名访问资源。修改config/cors.php：

return [
    'paths' => ['api/*', 'storage/*'], // 允许访问 storage 路径
    'allowed_methods' => ['*'],
    'allowed_origins' => ['http://localhost:3000'], // 替换为你的 Next.js 地址
    'allowed_headers' => ['*'],
];

4. 重启服务 #

修改配置后，重启 Laravel 服务和 Next.js 开发服务，确保所有配置生效。

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