javascript - Dynamic import image in Vue-3 - Stack Overflow

admin管理员组

文章数量:1392066

I'm trying to show a dynamically imported image, but it's not working with the error

'Cannot find module'

This is my ponent

<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>

And this is module

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

Commented out code not working

I'm trying to show a dynamically imported image, but it's not working with the error

'Cannot find module'

This is my ponent

<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>

And this is module

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

Commented out code not working

• javascript
• vue.js
• webpack
• vue-cli
• vuejs3

Share Improve this question Follow edited Feb 8, 2021 at 11:05 Dan 63.2k1818 gold badges111111 silver badges119119 bronze badges asked Feb 7, 2021 at 14:51 Nimble StalkerNimble Stalker 37555 silver badges1515 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

If you pass the full path to require in a variable, Webpack can't load the image. This is roughly because it's a build-time tool, and the path is created at runtime. If you hard-code at least some of the path though, that will be sufficient:

export const requireImage = link => {
  return require(`@/assets/${link}`);
}

^{Note: Removed the unnecessary async or the return value would be a promise}

Your variable footerItem.icon should just contain the filename color-circle.svg now that some of the path is hard-coded in the call to require. With that done, you can use the method in the template as you wanted:

<img :src="methods.requireImage(footerItem.icon)" alt="">

Be aware that at the moment your wrapper method is unnecessary because you could get the same result from:

<img :src="require(`@/assets/${footerItem.icon}`)">

本文标签： javascriptDynamic import image in Vue3Stack Overflow