Vue-3 中的动态导入图像

【问题标题】：Dynamic import image in Vue-3Vue-3 中的动态导入图像
【发布时间】：2021-05-11 07:52:53
【问题描述】：

我正在尝试显示动态导入的图像，但它无法解决错误

'找不到模块'

这是我的组件

<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')
}

注释掉的代码不起作用

【问题讨论】：

标签： javascript vue.js webpack vue-cli vuejs3

【解决方案1】：

如果在变量中传递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}`)">

【讨论】：