В Angular, как мне загрузить изображение, когда я не знаю расширение?

Question

У меня есть страница входа, на которой я хочу иметь возможность настраивать брендинг. Когда пользователь войдет в систему, он сможет загрузить изображение в формате .gif, .jpeg или .png, которое затем будет использоваться на странице входа в систему после выхода из системы. Файл будет сохранен с общим именем файла в заранее определенном месте, поэтому я буду знать все это, я просто не буду знать, какой формат файла был загружен.

Таким образом, в основном, когда клиент переходит на www.example.com/login/:id, приложение загружает файл образа с общедоступного смонтированного диска, на котором хранится образ. Структура каталогов подключенного диска, на котором хранится образ, будет выглядеть примерно так: /mnt/resource/client/:id/logo.*. Клиент еще не будет аутентифицирован, поэтому я не смогу получить доступ ни к какой базе данных.

Мой план состоял в том, чтобы сохранить каталог /mnt/resource/client в переменной среды, и когда загрузится компонент входа в систему, я добавлю идентификатор из параметров маршрута и имя файла, но на этом этапе я не буду знать, что расширение.

Есть ли способ загрузить изображение в тег html img с местоположением, похожим на /mnt/resource/client/0001/logo.*? Кроме того, logo.[png, jpg, gif] будет единственным, что хранится в этом месте.

РЕДАКТИРОВАТЬ: Я пытался использовать /mnt/resource/client/0001/logo.*, а также /mnt/resource/client/0001/logo, но оба дают 404. Я полагал, что это будет, но думал, что я все равно попробую.

Или, есть ли лучший способ подойти / решить эту проблему?

Кроме того, извините, если это дублирующий вопрос, я попытался найти похожие вопросы, но не нашел ни одного, но также не был уверен, правильно ли я сформулировал свой поисковый запрос.

Кроме того, дайте мне знать, если есть какие-либо подробности, которые я мог бы опустить. Заранее спасибо!

Answer 1

Я бы предложил использовать race из RXjs:

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

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

Комбинатор race отменит другие наблюдаемые в списке, таким образом отменяя вызовы HTTP.catchError превратит ошибку в никогда не завершающее наблюдаемое, что исключит себя из гонки.

Но, как утверждают другие, это приведет к снижению производительности, и вам лучше научить сервер обслуживать файлы без расширения..

Answer 2

Файл будет храниться с общим именем файла в заданном месте, поэтому я буду знать все это, я просто не буду знать, какой формат файла был загружен.

Этоне имеет значения.

Сервер должен хранить изображение по заданному 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/*.

Большинство современных веб-серверов позволяют настраивать тип содержимого для определенного URL-адреса или диапазона URL-адресов, и большинство из них автоматически определяет тип содержимого для статических файлов.

Не делайте бессмысленных 404 запросов на ваш сервер.

Answer 3

Чтобы загрузить изображение в html, вы должны знать полный путь.

У вас есть несколько вариантов здесь:

1. Сохранить полное имя изображения/ расширение в дб.В этом случае вашей логике приложения потребуется разрешить доступ только к тем частям базы данных, которые являются «общедоступными», со страницы входа в систему.Ваша страница входа будет запрашивать стандартный путь к изображению, например example.com/resources/loginImage_clientID, а ваш сервер будет выполнять поиск в базе данных на основе этого идентификатора и будет возвращать правильное изображение.
2. Выполните преобразование образов входа на стороне сервера, чтобычто вы всегда используете одно и то же расширение.

Я также предполагаю, что вы не загружаете эти изображения вручную для каждого клиента, поэтому, вероятно, у вас уже есть полное имя и расширение изображения в БДгде-нибудь, чтобы вы могли проверить, какому клиенту разрешено обновлять какое изображение.