Angular 6 Getting Загрузка изображения Ошибка. Получение «Не удалось загрузить ресурс: сервер ответил со статусом 404 (не найден)»

Question

У меня угловой проект, а домашняя страница в основном HTML. Когда я набираю «npm start», все изображения успешно загружаются. Когда я набрал "npg build --base-href" / MyProject / "--prod, домашняя страница пуста, когда я создаю свой собственный веб-сайт с уникальным портом. Когда я добавляю веб-сайт под веб-сайтом по умолчанию, домашняя страница загружается но я вижу ошибку

Не удалось загрузить ресурс: сервер ответил с состоянием 404 (не найдено)

для каждого изображения, которое оно пытается загрузить

В HTML-коде оно имеет следующий

<div> <div><p> <img alt="" src="/assets/img/image123.png" /></a></p></div> </div>

Я пытался добавить тильду, как <img alt="" src="~/assets/img/image123.png" />, но она все равно не работает.

Наконец, я снова загрузил Chrome и нажал F12. Я нажал на ошибку 404 и вижу список изображений, связанных с домашней страницей. На изображении, которое имеет проблемы с загрузкой, я вижу страницу как

http://localhost/assets/img/image123.png

Страница неверна и не найдет изображение.

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

Я также скопировал / вставил файл изображения в корневую папку, где он находится в wwwroot / MyProject / image123.png. Это фактически загружает файл, когда я изменил следующее

<div> <div><p> <img alt="" src="image123.png" /></a></p></div> </div>

Однако, когда я переместил файл изображения в wwwroot / MyProject / assets / image123.png со следующим

<div> <div><p> <img alt="" src="/assets/img/image123.png" /></a></p></div> </div>

изображение не загружается. Я попытался изменить на следующее

<img alt="" src="~/assets/img/image123.png" />

<img alt="" src="~assets/img/image123.png" />

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

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

Спасибо

Answer 1

Спасибо Гилсдав и Шили за вашу помощь. Я добавил ./assets/img/image123.png. Я также очистил кеш браузера. Предоставил всем пользователям разрешение на полный доступ к ресурсам и папкам img. Я получил псевдоним под Работающим веб-сайтом по умолчанию, но не независимый веб-сайт с его собственным номером порта. У него есть собственная ошибка 404 для стилей, основного и т. Д. *

В проекте angular-cli.json я добавил все файлы изображений в разделе «assets».

Надеюсь, это поможет другим.

Answer 2

Вы должны использовать относительный путь <div> <div><p> <img alt="" src="./assets/img/image123.png" /></a></p></div> </div> Поскольку папка «assets» находится в папке «src» и находится вне папки «app», поэтому вы должны использовать относительный путь (./), что означает, что вы вернетесь к одной папке