Javascript React动态导入不接受字符串变量

我有一个组件，可以在react中动态导入图像。这是我正在使用的组件：

import React from "react";
import PropTypes from "prop-types";

// Lazily load an iamge
class LazyImageLoader extends React.Component {
    constructor() {
        super();
        this.state = {
            module: null,
        };
    }

    async componentDidMount() {
        try {
            const { resolve } = this.props;
            const { default: module } = await resolve();
            this.setState({ module });
        } catch (error) {
            this.setState({ hasError: error });
        }
    }

    componentDidCatch(error) {
        this.setState({ hasError: error });
    }

    render() {
        const { module, hasError } = this.state;

        if (hasError) return <div>{hasError.message}</div>;
        if (!module) return <div>Loading module...</div>;

        if (module) return <img src={module} alt="Logo" />;

        return <div>Module loaded</div>;
    }
}

LazyImageLoader.propTypes = {
    resolve: PropTypes.func.isRequired,
};

export default LazyImageLoader;

从“React”导入React；
从“道具类型”导入道具类型；
//懒洋洋地装一个仪表
类LazyImageLoader扩展了React.Component{
构造函数（）{
超级（）；
此.state={
模块：空，
};
}
异步组件didmount（）{
试一试{
const{resolve}=this.props；
const{default:module}=await resolve（）；
this.setState（{module}）；
}捕获（错误）{
this.setState（{hasError:error}）；
}
}
componentDidCatch（错误）{
this.setState（{hasError:error}）；
}
render（）{
const{module，hasrerror}=this.state；
if（hasError）返回{hasError.message}；
如果（！模块）返回加载模块。。。；
如果（模块）返回；
返回模块加载；
}
}
LazyImageLoader.propTypes={
解析：需要PropTypes.func.isRequired，
};
导出默认LazyImageLoader；

现在，如果我尝试使用类似这样的组件，并将字符串用于应该导入的图像，则效果非常好：

<LazyImageLoader resolve={() => import("assets/images/os/netboot.svg")} />

import（“assets/images/os/netboot.svg”）}/>

但是，一旦我将URL提取到一个单独的变量中，它就不再工作，并且我会收到错误消息“找不到模块…”：

const path=“assets/images/os/netboot.svg”；
导入（路径）}/>

---

有没有一种方法可以使用变量进行动态导入？

根据中的答案：

“规范的导入（）规则与Web包本身处理导入（）的规则不同。”

---

因此，不，您不能将变量用于webpack动态导入语句。

直接使用变量不起作用，但可以按如下方式使用-

const path = './test.jpg';
import(`${path}`);

---

奇怪-我只能假设webpack在编译时转换导入字符串，因此无法从变量中找出路径。

const path = './test.jpg';
import(`${path}`);