如何向前端投放图像金字塔？

Question

我创建了一个图像金字塔，由大约5个目录中的20-50个图像组成。向前端服务的最佳方式是什么？将目录托管在可直接引用的地方？这似乎并不安全。通过API单独提供50个服务？这似乎相当笨拙。我不确定那是否会起作用。我相信他们需要进入目录结构来与前端组件进行交互。那可能吗？

任何意见表示赞赏。

Answer 1

这个问题的答案会根据不同的因素而有所不同。

设置它的一种方法是将图像文件托管在Web服务器上，并使用像cloudflare这样的cdn来缓存整个站点。 cdn在这里至关重要，否则您的资产可能需要很长时间才能加载。

高级步骤设置这将是从节点的Web服务器配置一个静态的目录，以便您的资产可以通过浏览器通过URL像这样访问：http://localhost/static/images/image.png

假设你正在使用的WebPack ，您可以使用file-loader简单地将import图像文件像其他任何js文件一样使用，并将其用于您的反应组件中。当您构建应用程序时，您可以配置file-loader自动将图像文件路径的引用替换为网页网址的引用。

最后，如果您只有5个图像目录，则可以在反应应用程序中为每个目录创建5条路线，并在每条路线中导入路线将显示的图像（例如import image from './static/images/image.png'或import * as images from './static/images/album'），并渲染它（例如，<img src={image} />或遍历图像数组并呈现每个图像）。