如何在 ReactJS 应用程序中使用多个图像？答案

【问题标题】：How to use multiple images in ReactJS application?如何在 ReactJS 应用程序中使用多个图像？
【发布时间】：2020-03-20 04:55:42
【问题描述】：

我有一个 ReactJS 应用程序。我有 100 张国旗图片（图标）。我需要在我的应用程序中使用它们。我有两种方法可以这样做，想知道这样做的最佳方法 - 1）我只需拨打 1 个 hhtp 电话即可获取图像 2) 这是处理这种情况的最佳方式。

方法 1 - 我可以精灵化所有 100 张图像。然后进行 1 次 http 调用以获取图像并利用背景位置来获取正确的图像。在这种方法中，我想知道是否 a) 如果使用 CSS Sprites 是现代的做法？有更好的办法吗？ b) 如果使用 CSS sprites，是否有任何工具可以创建 Sprite 图像并获取正确的位置值？

方法 2 - 在我的项目中，目前所有图像都在 /src/images 文件夹中。如果我将 100 张图片放在这个文件夹中，它将进行 100 次 http 调用。如果我错了，请纠正我。我可以将它们放在 /public/images 文件夹中，以便捆绑图像并且不会进行过多的 http 调用吗？（如果我引用公用文件夹中的任何图像文件，我会收到错误消息 - '不支持 src/ 之外的相对导入。'）无论如何，您通常将图像放在 /src/images 或 /public/images 内的什么位置？两者各有什么优势？

【问题讨论】：

标签： javascript reactjs image bundle css-sprites

【解决方案1】：

由于图像使用量如此之大，我建议您使用选项 2 LazyLoad 图像。

假设您的网页上有 100 种产品。如果您在一开始就同时请求所有 100 个产品图像，则会减慢加载时间。使用延迟加载，我们只会加载，比如说，最初对用户可见的 30 张图像。然后，当用户开始向下滚动页面时，我们将继续加载更多图像。这将有助于改善初始加载时间和用户体验。在某些情况下，用户不会向下滚动整个页面，因此某些图像根本不会加载。因此，您最终还可以节省图像传输的带宽成本。

由于您使用的是 reactjs，因此有许多可用的软件包。在这里我会推荐其中一个，但请随意探索：React-Lazyload

您甚至可以通过一些CDN来交付图片，以进一步加快加载速度。此外，将它们调整大小到实际需要的大小是一个好方法。此外，您还可以使用 以 80-90 质量编码的 JPG，因为它不会对图像质量产生太大影响，但会显着减小文件大小。

【讨论】：

【解决方案2】：

我会选择第二个选项。根据工具的不同，您可以使用 Webpack 或其他捆绑程序进行压缩（gzip 或 Brotli 压缩）。

您可以优化图像以确保它们不会过大且格式正确，然后压缩并从反向代理服务器提供。

为了进一步提高性能，您可以推迟屏幕外资源，以便在需要时加载您需要的图像，从而降低初始提取大小。

最后，您可以使用内存缓存、S3（或其他云存储）和内容交付网络（如 Cloudforce、Akkimai 等）将图像存储在靠近用户的云中。 CDN 经过优化以提供此类静态资产，可能需要考虑合并。

【讨论】：