为什么加载动态资源在 Nuxt v3 上失败

Question

我遇到了一个奇怪的情况，

我有一个Nuxt v3带有 vite 的“标准”项目

作品

<img src="~/assets/img/image.png">
<img src="~/assets/video/video.mp4">

不起作用

<img :src="require('~/assets/img/image.png')">
<img :src="require('~/assets/video/video.mp4')">

请注意，图像路径是相同的，因此它确实存在，我收到的错误是：

找不到模块“@/assets/img/image.png”需要堆栈

该文档没有提到实现它必须要做的任何事情

有什么我应该做的吗？

Answer 1

Vite中require不使用该功能；相反，您应该使用该import语句（Vite 是 Nuxt 3 的默认模块捆绑器）。

存在两个主要问题：

1. 构建完成后，Vite 会更改资产目录和文件名。
2. 动态使用时，别名不会转换为绝对路径。

例如，以下内容将不起作用：

<img :src="`_nuxt/assets/img/${imageName}`">

它在开发模式下工作，但在构建之后不起作用

解决方案1

我找到了这个方法：

export const useDynamicImage = (path: string): string =>
    new URL(path, import.meta.url).toString();

将其添加到您的堆肥中。您可以将路径传递给此函数并检索绝对路径。即使在构建之后，这种方法也能继续正常运行。

使用/src不@/

解决方案2

我发现这样：

export const useDynamicImage = (path: string): string =>
    new URL(path, import.meta.url).toString();

您可以将您的imageName（不要忘记扩展名）传递给此函数并检索绝对路径。

即使在构建之后，这种方法也能继续正常运行。

解决方案3

导入图像并像这样使用它们：

<script lang="ts" setup>
//@ts-ignore
import image1 from "../assets/images/image1.jpg";
//@ts-ignore
import image2 from "../assets/images/image2.jpg";
//@ts-ignore
import image3 from "../assets/images/image3.jpg";

const images = [image1, image2, image3];
</script>

解决方案4

将您的图像放在公共目录中。

了解更多：Nuxt 文档 - 公共目录

public/ 目录内容按原样在服务器根目录中提供。