Reactjs 使用react动态加载图像

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

这是组件

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

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

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

export default Icon;

import React，{lazy，suspent}来自“React”；
常量图标=（道具）=>{
const{src}=props；
返回(
);
};
导出默认图标；

然后我就这样用

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

从“/./images/icons/example.png”导入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>
    );
};

const图标=（道具）=>{
const src=lazy（（）=>import（“../../images/icons/”+props.src+.png”）；
返回(
);
};

---

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

不，您不能这样做，因为

React.lazy（）

必须位于顶层，并且只能返回React组件。要延迟加载图像，可以在效果内部执行以下操作：

功能图标=道具=>{
const[image，setImage]=useState（）
useffect（（）=>{
导入（“../../images/icons/”+props.src+“.png”）。然后（setImage）
}，[props.src]）
返回图像？：“正在加载…”
}

---

编辑：这有一个小问题，即Webpack将无法找出要进行代码拆分的文件，因为

import

函数中的字符串不是文本。您仍然可以使用

fetch

动态访问

public

目录中的文件。也许您根本不需要fetch，只需提供一个指向

src

的url，省去所有麻烦。

您可以应用以下方法：

const img=new Image（）；
src=url；

以及如何使用钩子完成此操作，并提供一个在线示例：

仅使用挂钩的另一种方法：

import React，{useffect}来自“React”；
导入“/styles.css”；
const loadImg=（src:string）：Promise=>
新承诺（（解决、拒绝）=>{
const img=新图像（）；
img.src=src；
img.onload=（）=>resolve（src）；
img.onerror=（）=>拒绝（新错误（“无法加载图像”）；
});
导出默认函数App（）{
const[src，setSrc]=React.useState（“preload-img”）；
useffect（（）=>{
const load=async（）=>{
等待装货(
"https://upload.wikimedia.org/wikipedia/commons/thumb/8/8c/Chess_Large.JPG/800px-Chess_Large.JPG"
).然后（（src）=>{
setSrc（src）；
});
}；//直接执行创建的函数
加载（）；
}，[src，setSrc]）；
返回(
你好，代码沙盒
开始编辑，看看神奇的发生！
);
}

我删除了我的答案，因为当我查看文档时，答案不起作用。你可以做两件事来延迟加载这个。您可以延迟加载组件（而不是img的源代码），也可以通过添加

load=“lazy”

属性来使用本机映像加载。我不会将此作为一个答案，因为我不确定您尝试的方向，并且还没有实际测试此解决方案。loading=“lazy”是仅在图像位于视口中时加载图像。我想要实现的是不同的。是动态加载图像。这是另一回事。但是，谢谢您，您可以内联加载SVG，这取决于您的构建工具。对于许多这样的工具来说，这是需要做的事情。如果不是，同样的链接也包含一些手动的替代方法。关于如何通过

正常处理事情，有什么特别的地方不够有效？因为在呈现

img

之前，它不会实际运行图像的获取。

动态加载图像

-这是一个非常模糊的语句。你想做什么？如果您想延迟加载图像，loading=“lazy”可能会对您有所帮助，如果您想实现某种代码拆分，那么将使用lazy和suspend@从技术上讲，伊尼克的评论也很有道理。如果你能解释你想要的最终结果是什么，这会有所帮助。