在 React 和 HTML 中渲染多个图像

Question

我在渲染具有大文件大小的图像时遇到问题。 当我上传大量大文件大小的图像并显示它们时，它变得非常滞后。

我的问题是：

理想的方式是后端应该提供一个非常小的图像文件大小 url？ 或者前端可以使用Canvas API来做到这一点？

你能提供一个解释吗？ 谢谢

Answer 1

如果你有一堆缩略图要显示，这些缩略图的源图像绝对不应该是原始的全尺寸图像。 如果这些图像很大，无论您如何在客户端上渲染它们，客户端都需要很长时间才能下载它们。

在确定要向客户端显示的图像时，您应该在服务器上有两个版本：

• 缩略图版 - 低分辨率，小文件大小，易于下载和一次渲染多个
• 全尺寸版本，当用户想要放大其中之一时下载

可能是全尺寸版本不一定是原始图像。 例如，如果原始图像是 20MB（是的，它们可以存在），您不希望给客户端增加负担。 因此，您希望在服务器上针对缩略图版本和“完整”版本执行调整大小和优化 - 足以使客户端尝试放大和全尺寸图像之间没有太多延迟满载。

Answer 2

我的建议是您将图像类型转换为性能更高的类型，例如 .webp 或 .jpeg，并为元素提供准确的宽度和高度属性。

并且 react 还具有使用 react.lazy() 延迟加载图像的功能，可以显着提高 web 性能

Answer 3

处理大图像对于前端客户端来说工作量太大。 您应该以较小的尺寸获取这些图像，以便按原样显示它们。

想象一下有人试图将您的应用程序与旧计算机甚至旧智能手机一起使用，您不应该依赖客户端的处理能力来处理所有这些繁重的工作。

希望我的回答对你有帮助！

Answer 4

Jpegs 是你应该使用的，看看 functionPreload() 以及