在我的 NuxtJS 项目中，我有一个接收图像路径作为道具的组件。我尝试将它直接传递给，:src="imageAddress"但它既不解决也不抛出错误。然后我尝试在里面使用这个路径require()来正确解决它。但是我收到了这个 Nuxt 错误：找不到模块“~/assets/icons/crown.png”。路径是正确的，我通过将img元素直接放在index.vue. 你知道为什么会这样吗？
这是我的代码的结构方式：
pages/index.vue
<template>
<ChildComponent image-address="~/assets/icons/crown.png" />
</template>
___________________________________________________________________
components/ChildComponent.vue
<template>
<img v-if="imageAddress.length" :src="require(imageAddress)">
</template>
<script>
export default {
name: 'ChildComponent',
props: {
imageAddress: {
type: String,
required: true,
default: ''
}
}
}
</script>您可以尝试在 ChildComponent 中创建方法：
getUrl (img) {
return require(`~/assets/icons/${img}.png`);
}
然后在模板中：
<img :src="getUrl(imageAddress)" alt="" />
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句