ES6 动态导入问题

Question

我正在使用动态导入的项目遇到问题。我正在使用带有 ES6 的 react.js

CSS

<button className="lightbox_button ezLightbox" data-src="./img/house15.jpg">Hello World</button>

JS

(async function () {
    let image = element.dataset.src;

    var houseImage = import(`${image}`);

    lightboxImage.src = await houseImage;

    console.log(houseImage);
  })();

这里我有一个带有 src 数据集属性的按钮。它旨在包含我要显示的图像的文件路径。在 JS 中，我从元素的数据集中获取 src 并尝试导入文件。然后我使用 async await 因为它是一个承诺并设置我想要拥有图像 src 的元素。

问题是它不起作用，lightboxImage 元素不会改变 src。我已经在不使用 react / ES6 导入的情况下测试了它并且它运行良好，所以它似乎是导入的问题。我控制台记录了等待的承诺，这是我正在寻找的承诺兑现的图像。元素被定义并且事件被触发。它正在读取数据集属性。任何人都知道为什么 src 没有正确导入或不适用于元素？