Путь к изображениям, не работающим в Angular 2

Question

Все, что я наложил на свой сайт, работает правильно, но каждое изображение, которое я пытаюсь поместить на сайт (за исключением фона), возвращает 404 Not Found Error.

Все мои изображения находятся в «Project/src/assets/images», и я пробовал следующие теги img в своих html-документах. Документы находятся в «Project/src/app/tabs».

<img src="src/assets/images/image_name.jpg"> 
<img src="/src/assets/images/image_name.jpg"> 
<img src="./src/assets/images/image_name.jpg"> 

Я установил фоновое изображение для своей страницы, используя css, и он работает. Это селектор и атрибут, который я применил:

background: url('assets/images/greybackground.jpg') no-repeat center center fixed; 

Как добавить изображения в документы HTML без ошибки 404?

Answer 1

Ваши html-файлы находятся в «Проект/src/app/tabs», и вы пытаетесь получить доступ из этой папки, поэтому изображения не загружаются. Итак, вам нужно вернуться с вкладками и папкой app, чтобы добраться до базового каталога как для вашего кода, так и для изображений. Используйте ../, чтобы вернуться из папки. Поэтому после достижения базового каталога просто используйте обычные списки каталогов.

Так ответ

<img src="../../assets/images/image_name.jpg"> 
<img src="../../assets/images/image_name.jpg"> 
<img src="../../assets/images/image_name.jpg">