vue 中的动态 src 与 laravel 9

Question

我正在使用 laravel 9（带 vite）和 vue 2.7，我需要使用 dynamic :src

但是当我用这个

<img :src="`../../assets/${path}`" >

url 在 DOM 中完美加载，但图像未显示在页面上。

当我使用它时收到错误消息说require is not defined时：

<img :src="require(`../../assets/${path}`)" >

节点 v16.14.0

Answer 1

首先，我建议检查您的模板字符串中的“路径”是否包含给定图像的扩展名（.png、.gif、.jpg）。

其次，您应该尝试将图像放在 Laravel 应用程序的公用文件夹中，因为默认情况下，Vue 组件会在该位置查找特定资源（在您的例子中是图像）。

例如，如果您有类似下面的代码，Vue 组件将在 Laravel 内的 public/images 子文件夹中查找特定图像。

/公共/图像

<img :src="`/images/${path}.png`" />

在您的情况下，整个路径是错误的，因为它超出了 Laravel 文件夹/应用程序。 你是说：Go 在公用文件夹之外，go 在外面多了一次，而不是寻找资产文件夹。

末尾的 /images in the:src 表示 public/images