Невозможно передать изображения с экспресс-сервера на угловой 2

Question

У меня есть экспресс-сервер, настроенный с помощью генератора экспрессов.

У меня есть эта строка в экспресс:

app.use(express.static(path.join(__dirname, 'public')));

Также в угловом коде у меня это:

img src="/images/pic.png".

Изображение находится в общедоступном / изображения в папке экспресс-генератора, и оно не будет отображаться в браузере.

Если я заменю код на img src="http://localhost:8080/images/pic...", он будет отображаться.

Я испробовал каждый трюк там. Я что-то не так делаю?

Answer 1

Я бы посоветовал проверить угловые настройки для baseurl, например, если вы работаете над угловым проектом 4+, вы можете установить базовый url внутри тега index.html head

<base href="./">

Тогда вам не нужно указывать абсолютный путь к любому из ваших ресурсов.

Answer 2

Необходимо указать базовый URL-адрес, по которому будет работать угловое приложение, чтобы получить статический контент или нажать API.

Следовательно, вы можете сделать что-то вроде ниже в вашей службе и указать это в файле .ts вашего компонента или, если хотите, можете объявить baseUrl внутри environment.ts файл: -

const baseUrl = http://localhost:8080;

, а затем в HTML вашего компонента: -

<img src="{{baseUrl}}/images/pic.png">

---

Проблема, с которой вы сталкиваетесь, связана с img src="/images/pic.png". Он попадет в домен, откуда подается угловое приложение. Следовательно, если вы разрабатываете приложение, то в общем случае оно будет img src="http://localhost:4200/images/pic.png".

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