我正在尝试显示动态导入的图像，但无法处理该错误
“找不到模块”
这是我的组成部分
<template>
<div class="footer">
<div v-for="footerItem in getters" :key="footerItem.id">
<img :src="methods.requireImage(footerItem.icon)" alt="">
</div>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { useStore } from '@/store'
import { requireImage } from '@/modules/images'
export default defineComponent({
name: 'Footer',
setup () {
const store = useStore()
const methods = {
requireImage
}
return {
getters: store.getters.getFooterItems,
methods
}
}
})
</script>
这是模块
export const requireImage = async (link: string) => {
// return require(link)
const image = await import(link)
return image
// const images = require.context('../assets', false)
// return images('color-circle.svg')
}
注释掉的代码不起作用
如果将完整路径传递到require变量中，则Webpack无法加载图像。这主要是因为它是一个构建时工具，并且路径是在运行时创建的。但是，如果您至少对某些路径进行了硬编码，那就足够了：
export const requireImage = link => {
return require(`@/assets/${link}`);
}
注意：删除了不必要的async或返回的值将是一个承诺
由于路径已在函数中，因此变量footerItem.icon应仅包含文件名color-circle.svg。完成后，您可以根据需要在模板中使用该方法：
<img :src="methods.requireImage(footerItem.icon)" alt="">
请注意，目前您不需要外部函数，因为您可以从以下命令获得相同的结果：
<img :src="require(`@/assets/${footerItem.icon}`)">
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句