Question

我试图有条件地从对象数组中导入renderGallery.js中的图像，每个对象都具有图像文件名，该图像的标题和该图像的标题的属性，然后将选定的图像推入另一个数组（imageData）中最终将用于在另一个模块中显示图像。下面的代码说明了我的问题。动态导入过滤后的图像会在Chrome的控制台中返回错误，例如：“找不到模块'./img3/IMG_3758.jpg'”（请注意文件名中的单点）。（如果用文字字符串代替变量$ {data1 [x] .SourceFile}，代码将按预期工作。）我研究了这个问题，研究表明下面的代码应该工作（请参阅Dynamic imports in ES6 with runtime variables）。我在做什么错了？

// array of objects containing info relating to images
const data = [
  {
    "SourceFile": "IMG_2146.jpg",
    "Title": "Windsong at Anchor",
    "Description": "hull"
  },
  {
    "SourceFile": "IMG_3752.jpg",
    "Title": "Navigation Station",
    "Description": "nav"
  },
  {
    "SourceFile": "IMG_3758.jpg",
    "Title": "Windsong Advdenturas View",
    "Description": "hull"
  }
];

//  This is the problematic code 
let imageData = [];  // eventually to be used in another module
for (let x = 0; x < data.length; x++) {
  if (data[x].Description === 'hull') {
    (
      async () => {
        const module = await \ 
           import(`../img3/${data[x].SourceFile}.jpg`);
        alert(module.default);
        const img = module.default;
        const temp = [img, data[x].Title];
        imageData.push(temp);
      }
    )();
  };
};

动态导入找不到文件

0 个答案: