reactjs - 使用 react 动态加载图片

Question

我创建了一个渲染图像的组件
这是组件。

import React, { lazy, Suspense } from "react";

const Icon = (props) => {
    const { src } = props;

    return (
        <img src={src}  />
    );
};

export default Icon;

然后我像这样使用它

import ExampleIcon from "./../images/icons/example.png";
...
<Icon src={ExampleIcon} />

有没有更有效的方法来加载图标？

然后只是“加载”example.png 并将其用作源？试图将其更改为:

const Icon = (props) => {
    const src = lazy(() => import("./../images/icons/" + props.src + ".png"));
    return (
        <Suspense fallback={<p>loading...</p>}><img src={src} /></Suspense>
    );
};

看起来它不能那样工作。还有其他想法吗？谢谢!

Answer 1

不，你不能这样做，因为 React.lazy() 必须在顶层并且只返回 React 组件。要延迟加载图像，您可以在效果中执行以下操作:

function Icon = props => {
    const [image, setImage] = useState()

    useEffect(() => {
        import("./../images/icons/" + props.src + ".png").then(setImage)
    }, [props.src])


    return image ? <img src={image} /> : 'Loading...'
}

编辑:这有一个小问题，即 Webpack 将无法找出要拆分的文件，因为 import 函数中的字符串不是文字。您仍然可以使用 public 来动态访问 fetch 目录中的文件。也许您根本不需要 fetch，只需向 src 提供一个 url 就可以省去整个麻烦。