时间戳

首页 > 解决方案 > 在 Angular 中，当我不知道扩展名时如何加载图像？

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。我认为它会，但我想我还是会尝试。

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

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

另外，如果有任何我可能遗漏的细节，请告诉我。提前致谢！

标签： javascripthtmlangularimage

解决方案

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

您在这里有几个选择：

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

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

推荐阅读