javascript Vue 3 + Vite图像URL在构建后变得未定义

0qx6xfy6 于 2023-01-29 发布在 Java

关注(0)|答案(3)|浏览(332)

我遇到了一个错误，我从Vue3组件中的图像导入属性动态生成了一个URL，但在构建后它变得未定义

const imagePath = computed(() => { return new URL(`../assets/${props.imgPath}.png`,
    import.meta.url).href

<img :src="imagePath" />

只有两个出许多图像是未定义后，建立这使得它很难牵制问题
我尝试过修改vite.config.ts，特别是build部分下的assetInlineLimit，但到目前为止没有任何效果

3条答案

我遇到了同样的问题，发现您需要将构建目标设置为“es2020”，因为默认的构建目标中没有定义 meta。在此页面的底部有一个小注解：https://vitejs.dev/guide/assets.html

我遇到了同样的问题，解决方案在我的情况下，图像名称必须像 prop 名称，因为它的大小写敏感，所以我改变了图像名称从“myimage.png”到“myiMage.png”

我有点晚了。但是对于任何还有这个问题的人，
与OP类似，这将不起作用。
它将返回未定义。（http：//localhost：5173/src/assets/icons/undefined）

const src = computed(() => {
    return new URL(`@/assets/icons/${props.src}`, import.meta.url);
});

只需将模板文本移动到变量中。
现在一切都正常了。

const src = computed(() => {
    const path = new URL('@/assets/icons/', import.meta.url);
    return `${path}/${props.src}`
});

显然，new URL不能很好地与模板文字一起工作。
有多个bug报告，可能会在将来修复。
我写这篇文章时正在使用vite 4.0。