vue.js - 汇总 Vue 3 动态 img src

Question

动态 img src 由 Webpack 的 require 处理:

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

如何在使用 Rollup 的 vite 应用程序上执行此操作？

Answer 1

您可以引用docs的 webpack-to-vite :
使用 Vite 的 API import.meta.glob转换动态require(例如 require('@assets/images/' + options.src) )，可以引用以下步骤

创建一个模型来保存导入的模块，使用异步方法动态导入模块并将它们更新到模型

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

用于 .vue证监会

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