如何将图像金字塔提供给前端？

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图像文件，并在您的反应组件中使用它。构建应用程序时，您可以配置import image from './static/images/image.png'以自动将图像文件路径的引用替换为网页网址的引用。

最后，如果您只有五个图像目录，则可以创建与您的反应应用程序上的每个目录相关的5条路线，并在每条路线中导入路线将显示的图像（例如import * as images from './static/images/album'或<img src={image} />），然后渲染它（例如for i in range(Num_Channels): trace0.append(go.Scatter(x=df_lab["Time"], y = df_lab[Headers[i+1]], mode = 'lines', name = Headers[i+1])) trace1.append(go.Scatter(x=X_SoC[i], y = Y_SoC[i], mode = 'markers', showlegend = False)) 或循环遍历images阵列并渲染每个）。