如何在 nuxtjs 中显示来自存储（Laravel）的图像

Posted 2023-03-14

【中文标题】如何在 nuxtjs 中显示来自存储（Laravel）的图像

【英文标题】：how show image from strorage (Laravel ) in nuxtjs

【发布时间】：2020-10-18 21:03:39

【问题描述】：

我想显示所有在 nuxtjs 中的图片，我使用了 storage (Laravel) 来保存文件

<img v-for="(row, index) in files" :src="'storage/' + row" :key="index"    class="img-fluid">

链接如下

http://localhost:3000/storage/example.jpg

但没有显示

我之前测试过，你不认为问题可能来自控制器吗？

public function index()

    $files = scandir(storage_path('app/public/'));
    $allFile = array_diff($files, ['.', '..', '.gitignore']);
    return response()->json($allFile, 200);

【参考方案1】：

这里的问题在于图像路径您需要指定图像文件的确切位置，因此您完成了大部分工作，例如:src="'storage/' + row"，但由于您的图像的实际路径是比如http://localhost:8000/storage/example.jpg（Laravel 应用的基本 URL）。

如果 Laravel 和 Nuxt.js 应用程序在同一个端口和主机下服务

您需要在 src 属性中使用前导斜杠来创建准确的路径。

<img v-for="(row, index) in files" :src="'/storage/' + row" :key="index"    class="img-fluid">

如果它们不在同一主机和端口上提供服务

您必须为您的基本 URL 声明一个单独的变量，最好在 .env 文件中，然后引用它并将其添加到您的图像 src 属性中。

假设我们要在.env 文件中定义它，那么它应该是这样的：

//.env
BASE_URL=http://localhost:8000/

然后我们将在我们的 javascript 数据方法中引用它（如果不存在，我们将使用默认值 'http://localhost:8000/'）。

data: function() 
    return 
      baseURL: process.env.BASE_URL || 'http://localhost:8000/ OR http://site.test/'
    
  

在最后一步中，我们会将它添加到我们的图像src 属性中，如下所示：

<img v-for="(row, index) in files" :src="baseURL + 'storage/' + row" :key="index"    class="img-fluid">