Nuxt 3 + Laravel 网站图片处理：存储、访问及路径配置问题

1. 图片应存储在Nuxt还是Laravel中？ #

优先存在Laravel后端，理由如下：

• 图片的上传校验、压缩裁剪、多格式生成这类逻辑本身就该由后端处理，后端能更安全地管控文件流程，还能统一管理资源的存储规则；
• 后端可便捷实现权限控制、资源备份和定期清理，前端（Nuxt）只需要专注展示，不用掺和文件存储的复杂逻辑；
• 你需要生成多种适配场景的图片格式，Laravel可以借助Intervention Image这类工具库直接完成格式转换与存储，流程更顺畅。

2. 若存储在Laravel，Nuxt如何访问这些图片？ #

两种常用方案：

• 直接通过Laravel静态资源URL访问：
  将图片存在Laravel的storage/app/public目录下，执行php artisan storage:link创建软链接到public/storage，此时图片可通过{Laravel域名}/storage/xxx.jpg直接访问，Nuxt里直接拼接这个完整URL即可。
• 通过接口返回图片URL：
  上传完成后，Laravel把各格式图片的URL存入数据库，接口返回文章数据时带上这些URL，Nuxt直接取用即可。这种方式更灵活，后续如果切换到云存储，前端无需修改代码。

3. 本地环境使用localhost:8000访问，如何指定图片路径以确保上线后图片不丢失？ #

核心是用环境变量替代硬编码的域名/路径：

• 在Laravel的.env文件中设置APP_URL，本地设为http://localhost:8000，上线后替换为你的生产域名（比如https://yourdomain.com）；
• 配置Laravel文件系统，在config/filesystems.php的public磁盘中添加URL配置：

  'public' => [
      'driver' => 'local',
      'root' => storage_path('app/public'),
      'url' => env('APP_URL').'/storage',
      'visibility' => 'public',
  ],
  

  这样Laravel生成的图片URL会自动带上APP_URL中的域名，存入数据库的就是完整的带域名路径；
• 在Nuxt的.env文件中设置NUXT_PUBLIC_LARAVEL_URL，本地对应http://localhost:8000，上线后替换为生产域名。如果是手动拼接路径，就用这个环境变量组合：

  // Nuxt示例代码
  const imageUrl = `${process.env.NUXT_PUBLIC_LARAVEL_URL}/storage/${imagePath}`
  

  本地和上线仅需修改环境变量，不会出现路径错误。

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