如何在 Nuxt + Laravel 网站上处理图像？

Question

我正在

Nuxt 3

+

Laravel

（后端）上制作一个网站。我有一个文章编辑器，可以上传图像。我需要将此图像压缩并裁剪为几种不同的格式。然后，我将根据输出位置采用所需的格式。

Nuxt

和

Laravel

位于服务器上的不同文件夹中，具有不同的 url。问题：

1. 我应该在哪里存储图像 -

   Nuxt

   或

   Laravel

   ？

如果在

Laravel

，则：

2. 如何从

   Nuxt

   访问它们？
3. 鉴于当前通过本地路径访问该站点 -

   localhost:8000

   ，如何指定图像的路径？当我在互联网上发布网站时，我需要图像不会消失。

Answer 1

尝试@storage指令

<img src="@storage('images/product-image.jpg', { baseUrl: process.env.BASE_URL })" />

假设你的图片文件位于 Laravel 存储目录的 images 目录中。 @storage()指令将自动解析图像文件的路径并将其作为字符串返回。

Answer 2

存储图像的位置取决于您的具体用例和要求。您可以在 NuxtJS 端存储静态图像（例如横幅图标），在 Laravel 端存储动态图像（例如用户文档、产品图像和头像）。

因此，在 Laravel 端，您可以使用文件函数并将图像存储在存储文件夹中，然后创建存储链接（PHP artisan storage:link），然后创建 API 并在响应对象中返回完整图像路径。

public function uploadImage(Request $request)
    {
        $image = $request->file('image');
        if ($image) {
            $file_name = uniqid() . '.' . $image->getClientOriginalExtension();
            Storage::disk('public')->putFileAs('images', $image, $file_name);

          //store complete path in db or just name of name 
          //'/storage/images/' . $filename
        }
        return response()->json(['error' => 'No image uploaded'], 400);
    }

在 NuxtJS 中，您可以通过一些配置来使用。 https://image.nuxtjs.org/configuration

<nuxt-img :src="user. Avatar" />