Question

我有一个登录页面，希望能够启用自定义品牌。客户登录后，他们将能够上载.gif，.jpeg或.png图片，然后在他们注销后将其用于登录页面。该文件将以通用文件名存储在预定位置，因此我将知道所有这些，而我只是不知道上传的文件格式是什么。

因此，基本上，当客户导航到www.example.com/login/:id时，应用程序将从存储图像的公共可用装载驱动器中加载图像文件。存储映像的已安装驱动器的目录结构将类似于/mnt/resource/client/:id/logo.*。该客户尚未通过身份验证，因此我将无法访问任何数据库。

我的计划是将目录/mnt/resource/client存储在一个环境变量中，并且在登录组件加载完毕后，我将附加来自路由参数的ID和文件名，但是此时我不会知道扩展名是什么。

有没有办法将html img标签中的图像加载到类似/mnt/resource/client/0001/logo.*的位置？另外，logo.[png, jpg, gif]将是唯一存储在此位置的东西。

编辑：我尝试同时使用/mnt/resource/client/0001/logo.*和/mnt/resource/client/0001/logo，但都给出了404。我认为可以，但是我仍然想尝试。

或者，有没有更好的方法来解决这个问题？

也很抱歉，如果这是重复的问题，我试图搜索相关问题，但没有找到任何问题，但是也不确定我是否正确制定了搜索查询。

另外，让我知道是否有任何遗漏的细节。预先感谢！

Answer 1

要以html格式加载图像，您必须知道完整路径。

您在这里有几个选择：

将完整的图像名称/扩展名存储在数据库中。然后，您的应用程序逻辑将只需要允许从登录页面访问数据库的“公共”部分。您的登录页面将请求标准图像路径，例如example.com/resources/loginImage_clientID，而服务器将根据该ID进行数据库查找，并返回正确的图像。
对登录图像进行服务器端转换，以便您始终使用相同的扩展名。

我还假设您没有为每个客户端手动上传这些图像，因此大概您已经在数据库中某个位置获得了完整的图像名称和扩展名，以便您可以验证允许哪个客户端更新哪个图像

Answer 2

我建议使用race中的RXjs：

const extensions = ['png', 'jpg'];

race(
   ...extensions.map(ext => this.http.get(`${file}.${ext}`).pipe(
     catchError(e => NEVER),
   )),
)

race组合器将取消列表中的其他可观察对象，从而取消HTTP调用。 catchError会将错误变成永远无法完成的观察，从而将自己从比赛中消除。

但是，正如其他人所述，这将导致性能下降，您应该学习服务器如何在不扩展的情况下提供文件。

Answer 3

该文件将以通用文件名存储在预定的位置，所以我会知道所有这些，我只是不知道上传哪种文件格式。

没关系。

服务器应将图像存储在没有文件扩展名的给定URL中。

http://www.example.com/user/:id/logo

当浏览器请求资源时，服务器在HTTP标头响应中包括内容类型，浏览器将自动显示图像。不管是PNG，JPEG还是GIF。

https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types

如果服务器不支持内容类型检测，则它应发送content-type: image/*类型的图像。

大多数现代Web服务器允许您配置特定URL或URL范围的内容类型，并且大多数将自动检测静态文件的内容类型。

不要向您的服务器发出无意义的404请求。

在Angular中，不知道扩展名时如何加载图像？

3 个答案: