Получить изображение с локального на локальный с помощью Express и Nodejs

Question

Я создаю приложение с NodeJs и Angular

Сервер работает на http://localhost:9000

И приложение работает на http://localhost:4200

У меня есть конечная точкачей это выглядит http://localhost:9000/users Я использую это для извлечения всех пользователей

В возвращаемом наборе есть ключ как этот { photo: myphoto.jpg }

Когда я зацикливаю набор данных, я хочудля рендеринга изображения следующим образом:

  <img src="{{ url }}/uploads/users/{{ user.photo }}" alt="{{ user.name }} {{ user.last_name }}"
    class="img-fluid shadow-sm avatar100 ml-auto mr-auto d-block rounded-circle">

Где url равно http://localhost:9000, а user.photo равно myphoto.jpg

Полный маршрут: http://localhost:9000/uploads/users/myfoto.jpg Естьфотография размещена, но сервер выдает ошибку

Не удается получить /uploads/users/myfoto.jpg

Я думаю, сервер интерпретирует URL как APIмаршрут, и, очевидно, не объявлен в файле маршрутов.

Я хочу только получить изображение, как я могу это сделать?

Я не знаю, какую часть своего кода я могу показатьВот.Маршруты?Внешний интерфейс?Структура проекта?Скажи мне, что тебе нужно

Answer 1

С помощью Express вы должны создать маршрут, который будет обрабатывать URL-адреса ваших изображений. По умолчанию Express (или встроенный веб-сервер node.js) не обслуживает ЛЮБЫЕ файлы. Таким образом, он будет обслуживать файл, только если вы создадите обработчик для этого конкретного URL-адреса и запрограммируете этот обработчик для доставки нужного файла.

Если ваши изображения находятся непосредственно в файловой системе, где базовое имя файла URL совпадает с фактическим именем файла в файловой системе сервера, вы можете использовать express.static() для создания единого маршрута, который будет обслуживать все ваши изображения.

Например, вы можете использовать express.static так:

 app.use("/uploads/users", express.static("/uploads/users"));

Это позволило бы URL, запрошенный из:

http://localhost:9000/uploads/users/myphoto.jpg

для автоматического обслуживания из серверной файловой системы на

/uploads/users/myphoto.jpg

Аналогично будет работать для любого другого подходящего имени в этом же каталоге (или даже подкаталогах этого каталога, если подкаталог также был в URL).

Как правило, вы не хотите отображать имена внутренних путей, такие как /uploads/users, вплоть до HTML-страниц пользователя. Таким образом, вы можете сделать это вместо этого на странице HTML:

<img src="/images/myphoto.jpg">

И это на сервере:

 app.use("/images", express.static("/uploads/users"));

Это будет принимать любые http-запросы, начинающиеся с пути /images, и искать соответствующее имя файла в /uploads/users на сервере, таким образом, не раскрывая внутренности структуры каталогов вашего сервера клиенту. Он создает понятие абстрактного /images URL-адреса, который ваш сервер может затем обработать и получить изображения, где бы они ни хранились на сервере.