Javascript 在Angular中，当我没有'；我不知道分机号码？

我有一个登录页面，我想能够有自定义品牌。当客户登录时，他们将能够上载.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。我想会的，但我想我还是会试试

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

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

---

另外，如果我遗漏了任何细节，请告诉我。提前谢谢

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

您在这里有几个选项：

将完整映像名/扩展名存储在数据库中。然后，您的应用程序逻辑只需要允许从您的登录页面访问数据库中“公共”的部分。您的登录页面将请求一个标准映像路径，如

example.com/resources/loginImage\u clientID

，服务器将根据该id执行db查找，并返回正确的映像

对登录映像进行服务器端转换，以便始终使用相同的扩展名

---

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

我建议使用

race

from

RXjs

：

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

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

race

combinator将取消列表中的其他观察值，从而取消HTTP调用

catchError

会将错误转化为永远无法完成的可观察性，从而将自己从比赛中淘汰

但正如其他人所说，这将导致性能低下，您更应该学习服务器如何在没有扩展名的情况下提供文件

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

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

没关系

服务器应该将图像存储在给定的URL上，而不使用文件扩展名

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

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

如果服务器不支持内容类型检测，则应发送带有

内容类型：image/*

类型的图像

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

---

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

这样您就知道文件名，但不知道其扩展名了吗？您可以在上传时重命名该文件，以便在文件名中包含扩展名吗？比如

png\u customerlogo.png

或者只允许它们以png的形式上传。如果您使用的是apache，您可能可以试试这个