Question

我正在使用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。这仅在生产中发生。

Answer 1

我遇到了同样的问题，我发现下面的文章说您可以使用 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;

在React应用程序中渲染SVG图像时出现延迟

1 个答案: