使用react动态加载图像

Question

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

\n

这是组件。

\n

import React, { lazy, Suspense } from "react";\n\nconst Icon = (props) => {\n    const { src } = props;\n\n    return (\n        <img src={src}  />\n    );\n};\n\nexport default Icon;\n

\n

然后我像这样使用它

\n

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

\n

有没有更有效的方法来加载图标？\n\n然后只需“加载”example.png 并将其用作源？尝试将其更改为：

\n

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

\n

看起来 \xc2\xb4 不是这样工作的。还有其他想法吗？谢谢！

\n

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，只需提供一个 urlsrc即可免去所有麻烦。