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

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加载图像，您必须知道完整路径。

您在这里有几个选择：

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

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

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请求。