动态使用时，波形符不会转换为绝对路径

Question

我想动态创建 3 张卡片。每张卡都有一个图像，我想为每张卡动态设置一个路径，但我无法使用波浪号，~因为波浪号不会转换为绝对路径：

<img
        :src="'~/assets/images/how-to-use/image1.jpg'"
        :alt="part.title"
      />

我收到此错误：

GET http://localhost:3000/~/assets/images/how-to-use/image2.jpg 404 (Page not found: /~/assets/images/how-to-use/image1.jpg)

我设置buildAssetsDir为example但我什至不能这样做：

GET http://localhost:3000/~/assets/images/how-to-use/image2.jpg 404 (Page not found: /~/assets/images/how-to-use/image1.jpg)

该代码在构建时间后将不起作用。但为什么？

Answer 1

如果你使用vite. 我发现这样：

<script>
const glob = import.meta.glob("~/assets/images/how-to-use/*", {
  eager: true,
});

const getImageAbsolutePath = (imageName: string): string => {
  return glob[`/assets/images/how-to-use/${imageName}`]["default"];
};
</script>

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

即使在构建之后，这种方式仍然有效。

你不能使用这个：

<script>
const glob = import.meta.glob("~/assets/images/how-to-use/*", {
  eager: true,
});

const getImageAbsolutePath = (imageName: string): string => {
  return glob[`/assets/images/how-to-use/${imageName}`]["default"];
};
</script>

但为什么？

因为nuxt3也会改变assets文件名，所以这个路径不正确

重要笔记

1. require不适用于 vite
2. 您也可以在模板中使用import image1Name from '../assets/images/how-to-use/image1.jpg'和使用。image1Name
3. 您始终可以将图像添加到公共文件夹中， 这些方法在构建后有效