在 .Net Core 中使用 React 时延迟加载本地图像答案

【问题标题】：Local images load after delay when using React in .Net Core在 .Net Core 中使用 React 时延迟加载本地图像
【发布时间】：2021-01-13 21:53:10
【问题描述】：

我使用 Visual Studio 提供的模板创建了一个托管在 .Net Core Back-End 中的 React 应用程序。

最后，我遇到了一个奇怪的行为：当一个带有图像的组件在本地保存时，第一次渲染时，图像会在大约 1/2 秒的延迟后显示。下一次，组件正常渲染，图像已经显示。

当我使用来自 Internet 的图像时，不会发生此问题。比如：

<img src="www.google.com/example.png" alt="random image">

图像会立即加载。

附加信息是，当我启动 React 应用程序和 .Net Core 服务器时会发生此问题，因此它们共享相同的端口。当我使用 npm start 启动前端时，图像会立即加载，或者很少有明显的延迟。

图片为 .jpg 和 .png 从 15kb 到 60kb。

我试过了：

将图像存储在 React 的公共文件夹中，

直接在 src 属性中插入 URL：

<img src="images/example.jpg" alt="test pic" />

将它们存储在 React 的 src 文件夹中，

导入图片，然后使用src属性中的引用：

import myImage from "../images/example.jpg";

<img src={myImage} alt="test pic" />

没有解决问题...这是 .Net Core 如何管理 React 应用程序的问题吗？

即使没有 Internet 连接，我也需要使用该应用程序，因此我必须依赖本地资源。

提前感谢您的帮助:)

【问题讨论】：

【解决方案1】：

这听起来像是一个特定于应用程序的问题。

一种方法是查看 SSR 并在页面加载时呈现 HTML 标记。

这将帮助您诊断问题是否与您的组件代码有关，或者是应用程序配置问题

aSync 加载图像如果位于文件夹下方，可能会提高性能。您是否在解决方案中使用任何延迟加载框架和代码 - 例如 react-lazy-load-image？这可能会启动并导致延迟

【讨论】：

您好乔恩，感谢您的回答。不，我不使用任何延迟加载框架。目前，我更喜欢在使用服务器端渲染路线之前解决保留客户端渲染功能的问题
如果图像在 npm 启动时立即加载，您是否将它们缓存在本地，如果不是的话？我在使用第三方框架 Qubit 时遇到了这个问题。它运行阻塞，导致在 render() 和图像渲染期间出现几秒钟的延迟。查看 Chrome 中的瀑布工具以查找阻塞请求