将 Vuejs 3 中的 require 替换为图像数组的 Vite

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>

然后是以下具有丰富简单的动态类，可以滚动图像。

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

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

我如何简单地将图像加载到数组中并滚动浏览组件。

Answer 1

您可以创建函数：

检查 vite 文档

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

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

app.config.globalProperties.$image = useImage;

然后像这样使用它：

$image(imageUrl)