如何在Nuxt+Laravel网站上使用图像?

尝试 @存储器 指令

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

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

存储图像的位置取决于您的特定用例和需求。您可以在NuxtJS端存储静态图像(横幅图标),在Laravel端存储动态图像(用户文档、产品图像和头像)。

因此,在Laravel方面,您可以使用文件函数并将图像存储在存储文件夹中,然后创建存储链接(PHP手工存储:链接),然后创建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" />