我应该从服务器加载图像还是从 url 获取？答案

【问题标题】：Should i load image from server or fetch from url?我应该从服务器加载图像还是从 url 获取？
【发布时间】：2021-01-13 04:55:54
【问题描述】：

我是web开发的新手，我想创建一个dota 2的Vuejs应用程序，会有一个卡片网格，每张卡片都有英雄资料，我在本地将所有这些英雄数据保存在一个json文件中包含img路径，问题我们有这么多关于100个英雄的图像，每个都有4个能力，所以100个英雄头像+400个能力，这有点巨大。我应该将这些图像部署到我的托管服务器还是更改 img 路径以从 dota2.com 获取？哪个更好更快？对客户端有什么影响？我的问题是我不知道客户端是在旅途中加载图片还是他们需要先下载所有 500 张图片才能让我的网站正常工作。

如果我使用 url fetch，这意味着我的网站是静态的还是动态的？我可以将它发布到 GitHub 还是需要 Firebase 来托管它？

【问题讨论】：

这个问题非常广泛。简而言之，您不应该在未经许可的情况下直接从另一台服务器上提供图像，因为这会占用他们的带宽。
但是 Valve 有一个 API 并且它是免费的，我不想使用 api 因为我希望我的网站是静态的
我很难想象（哈，明白了吗？）你的情况，但现在 native lazy loading 没有很好的支持，所以我会通过 JavaScript 进行异步加载，使用Image + onload （网上有很多文章），可能需要Intersection Observer API 来加载它们。这有意义吗？

标签： html image

【解决方案1】：

静态或动态是指数据是恒定的还是在一组条件下发生变化的。您似乎有一个基于 Valve API 结果集字段的图像列表。我建议至少出于以下原因使用这些图像：

像 Valved 这样受欢迎的网站更有可能在多个区域进行缓存。这意味着如果您在蒙大拿州并且用户在泰国，则可能在比您的单个服务器更靠近他们的服务器中存在图像副本；除非你当然也实现了类似的东西。
如果您正在使用他们的 API 并且他们会获得一个特定的 URL，您将不必为您可能被授权使用的带宽付费。您应该阅读他们的条款和条件。
如果角色的图像发生变化，它会相应地更新。
可以根据设备提供多个版本的图像。例如，可能会为移动设备提供与台式计算机不同的图像。

请注意，第三个原因可能被认为是动态的，但它不适合您。从某种意义上说，它是静态的，您将始终使用从 API 检索到的图像。此外，如果 Valve 更改图像，请考虑 json 文件的负面影响。您应该考虑每隔一段时间重新创建 json 文件。

无论哪种方式，客户端都是相同的 - 将针对每个图像向您的服务器或 Valve 服务器发出请求。提供图像的速度将是决定因素。

【讨论】：