Html 动态使用时波浪号不转换为绝对路径

发布于12月12日

我想动态创建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，但我甚至不能这么做:

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

此代码在构建时间过后将不起作用.但是为什么呢？

推荐答案

如果你使用维生素E. 我发现了这样的方式:

<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(不要忘记扩展名)传递给该函数并获得绝对路径.

即使在构建之后，这种方法也能起作用.

您不能使用以下命令:

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

但是为什么呢？

因为nuxt3也会更改assets资源文件名，所以该路径不正确

重要说明

require不适用于VITE
您也可以在模板中使用import image1Name from '../assets/images/how-to-use/image1.jpg'和image1Name.
您始终可以将图像添加到公用文件夹 these ways work after the build个