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

Question

我有一个组件可以让我在 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;

现在，如果我尝试像这样将这个组件与应该导入的图像的字符串一起使用，它就可以正常工作:

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

但是，一旦我将 URL 提取到一个单独的变量中，它就不再有效，并且我收到错误消息“找不到模块...”:

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

有没有办法使用变量进行动态导入？

Answer 1

根据答案:

Dynamic imports in ES6 with runtime variables

“规范的 import() 规则与 Webpack 本身能够处理 import() 的规则不同”。

所以不，你不能在 webpack 动态导入语句中使用变量。