我在渲染大文件大小的图像时遇到问题。当我上传大量大文件大小的图像并显示它们时，它变得非常滞后。
我的问题是:
理想的方式是后端应该提供一个非常小的图片文件大小的url？ 或者前端可以使用 Canvas API 来完成？
你能解释一下吗？谢谢
最佳答案
如果您有一堆缩略图要显示，那么这些缩略图的源图像绝对不应该是原始的全尺寸图像。如果这些图像很大，客户端将需要很长时间才能下载它们，无论您如何在客户端上呈现它们。
在确定要显示给客户端的图像时，服务器上应该有两个版本:
- 缩略图版本 - 低分辨率、小文件大小、易于下载和同时渲染多个
- 全尺寸版本，当用户想要放大其中一个时下载
可能是全尺寸版本不应该一定是原始图像。例如，如果原始图像为 20MB(是的，它们可以存在)，您不想给客户增加负担。因此，您希望在服务器上为缩略图版本和“完整”版本执行调整大小和优化 - 足以让客户端尝试放大和全尺寸图像之间没有太多延迟完全加载。
关于javascript - 在 React 和 HTML 中渲染多个图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/73656560/