我想动态创建 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
to example
但我什至不能这样做:
<img
:src="'example/assets/images/how-to-use/image1.jpg'"
:alt="part.title"
/>
该代码在构建时间后将不起作用。但为什么?
如果你使用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
(不要忘记扩展名)到这个函数并获取绝对路径。
即使在构建之后,这种方式仍然有效。
你不能使用这个:
<img
:src="'example/assets/images/how-to-use/image1.jpg'"
:alt="part.title"
/>
but why?
因为nuxt3也会改变assets文件名,所以这个路径不正确
重要笔记
-
require
不适用于 vite
- 您可以使用
import image1Name from '../assets/images/how-to-use/image1.jpg'
并使用image1Name
也在你的模板中。
- 您随时可以将图像添加到公共文件夹中这些方法在构建后起作用
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)