用 Vite 替换 Vuejs 3 中的 require for image array

Question

我目前正在使用 vuejs 切换到 vite 并遇到以下问题：

我在调试中有一个组件显示文件夹中的图像：

imageArray: [
     require ("../ assets / dummies / Mission -1.jpg"),
     require ("../ assets / dummies / Mission -2.jpg"),
     require ("../ assets / dummies / Mission -3.jpg"),
     require ("../ assets / dummies / Mission -4.jpg")
]

组件中是下面的div

<div: class = "bgClass" v-if = "isDebug () == true"> </div>

然后有以下动态 class 可以滚动浏览图像。

computed: {
     bgClass: function () {
      
       return {
           backgroundImage: 'url (' + this.imageArray [this.imagePos] + ')',
           ...
       }
     }
   }

Required 在 Vite 中不可用，我不想将旧的 vue2 组件转换为 vue3 组件API。

我怎样才能简单地将图像加载到数组中并滚动组件。

Answer 1

您可以创建函数：

check vite docs

const useImage = ((url) => {
  return new URL(`/src/${url}`, import.meta.url).href;
});

并创建全局属性（在 main.js 中）：

app.config.globalProperties.$image = useImage;

然后像这样使用它：

$image(imageUrl)

用 Vite 替换 Vuejs 3 中的 require for image array

Replacement for require in Vuejs 3 with Vite for image array

javascript

vue.js

vuejs3

vite