【问题标题】:Delay when rendering svg image in react application在反应应用程序中渲染 svg 图像时延迟
【发布时间】:2019-10-28 19:59:43
【问题描述】:

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

【问题讨论】:

  • 取决于 menu_icon.svg 中的内容 如果它足够大,则可能需要 1 秒钟来a)通过网络传输和 b)渲染。
  • 对不起,编辑了我的问题。它只发生在生产中,并且 SVG 图像不是那么大,每个 2 kb(没有 gzip)
  • 我们在这里需要一个测试用例。我们不调试生产系统。修复生产系统后,您的问题对其他人没有任何帮助。

标签: reactjs image svg


【解决方案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;

【讨论】:

    猜你喜欢
    • 2016-01-10
    • 2021-06-26
    • 2019-01-21
    • 1970-01-01
    • 1970-01-01
    • 2018-08-31
    • 1970-01-01
    • 2015-09-23
    • 1970-01-01
    相关资源
    最近更新 更多