在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。我认为会是这样，但还是想试一下。

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

还有，如果我漏掉了任何细节，请告诉我。提前致谢！

- Mr Shantastic

---

你知道文件名但不知道文件扩展名？上传时可以重命名文件并将扩展名包含在文件名中吗？比如 png_customerlogo.png 或者只允许上传PNG格式的文件。 - Ronnie

如果您正在使用Apache，您可以尝试这个：https://serverfault.com/a/390503/93936 - Ronnie

Answer 1

我建议使用来自 RXjs 的 race：

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

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

race组合器将取消列表中的其他可观察对象，从而取消HTTP调用。 catchError会将错误转换成永远不会完成的可观察对象，从而使其自身退出竞争。

但正如他人所述，这会导致性能下降，您最好学习如何让服务器在没有扩展名的情况下提供文件。

- Akxe

Answer 2

为了在HTML中加载图像，您必须知道完整的路径。

这里有几个选项：

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

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

- frodo2975

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

- Reactgular