如何使用require动态加载img

如何解决如何使用require动态加载img

这是一个带有 vue3 的程序。我想使用 for 循环来要求 data() 中的图像。我是这样写的。

注释的代码，// url: require(' ../../../assets/img/heartsgroup/'+notOrder[i]+'.svg',it works.

然而，代码--- url: require(path+''+notOrder[i]+''+type)，不起作用。

谁能告诉我原因？

        data() {
            const items = [];
            const notOrder = [13,10,9,4,1,8,6,2,11,3,5,12,7];
            const path =  "../../../assets/img/heartsgroup/";
            const type =  ".svg";
            for (let i = 0; i < notOrder.length; i++) {
                const fullPath = '../../../assets/img/heartsgroup/10.svg';
                items.push({
                    // url: require('../../../assets/img/heartsgroup/'+notOrder[i]+'.svg'),//it works
                    url: require(path+''+notOrder[i]+''+type),// it dose not work
                    id: notOrder[i]
                });
            }
            return {items}