汇总Vue 3动态img src

Question

动态img src由Webpack的要求处理：

html prettyprint-override"><img :src="require(`@/assets/${posts.img}`)" alt="">

如何在使用Rollup的vite应用程序上实现这一点？

Answer 1

您可以参考网页上的文档进行访问：

使用Vite的APIimport。元。glob要转换动态require（例如，require（“@assets/images/”options.src）），可以参考以下步骤

1. 创建模型以保存导入的模块，使用异步方法动态导入模块并将其更新到模型

// src/store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
const assets = import.meta.glob('../assets/**')
Vue.use(Vuex)
export default new Vuex.Store({
  state: {
    assets: {}
  },
  mutations: {
    setAssets(state, data) {
      state.assets = Object.assign({}, state.assets, data)
    }
  },
  actions: {
    async getAssets({ commit }, url) {
      const getAsset = assets[url]
      if (!getAsset) {
        commit('setAssets', { [url]: ''})
      } else {
        const asset = await getAsset()
        commit('setAssets', { [url]: asset.default })
      }
    }
  }
})

// img1.vue
<template>
  <img :src="$store.state.assets['../assets/images/' + options.src]" />
</template>
<script>
export default {
  name: "img1",
  props: {
    options: Object
  },
  watch: {
    'options.src': {
      handler (val) {
        this.$store.dispatch('getAssets', `../assets/images/${val}`)
      },
      immediate: true,
      deep: true
    }
  }
}
</script>