时间戳

首页 > 解决方案 > 使用反应动态加载图像

reactjs - 使用反应动态加载图像

问题描述

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

这是组件。

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>
    );
};

看起来它不是那样工作的。还有其他想法吗？谢谢！

标签： reactjs

解决方案

不，你不能这样做，因为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，只需提供一个 url 即可src免去所有麻烦。

推荐阅读