我正在使用 React 版本 16.8.6。我正在尝试在我的应用程序中加载一些 SVG 图像,但是在图像出现在 dom 中之前有 1 秒的延迟。
这是我加载 svg 图像的方式
import menuIcon from 'public/images/menu_icon.svg';
<img src={menuIcon} />
请找到显示加载延迟问题的 gif 链接。 https://ibb.co/jH35S38
PS。这只发生在生产环境中。
最佳答案
我遇到了同样的问题,我发现下面的文章说你可以使用 SVG 作为组件,并且因为图像没有作为单独的文件加载,所以没有延迟。 它对我有用。
https://blog.logrocket.com/how-to-use-svgs-in-react/
import React from 'react';
import {ReactComponent as ReactLogo} from './logo.svg';
const App = () => {
return (
<div className="App">
<ReactLogo />
</div>
);
}
export default App;
关于reactjs - 在 react 应用程序中渲染 svg 图像时延迟,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56593799/