Угловой 4 Img src не работает

Question

Угловой 4 Img src не работает

У меня проблема с изображением src в угловом 4. Он продолжает говорить мне, что изображение не найдено.

Структура папок: Здесь

Я использую изображение в mycomponent. Если в моем компоненте я вставляю напрямую

<img src="img/myimage.png"

Он отлично работает, но я проверил html и создал хэш. Но мои изображения должны быть динамически добавлены в html, потому что они являются частью списка. Итак, если я использую:

<img src="{{imagePath}}">

который в основном является «img / myimage.png», он не работает. Если я использую

<img [src]="imagePath">

Он говорит НЕ НАЙДЕН (htttps: //localhost/img/myimage.png). Вы можете мне помочь?

html,image,angular,src,

25

Ответов: 12

HTML, изображения, угловые, SRC,

Похожие вопросы

score 30 · Accepted Answer

30

AngularJS

<img ng-src="{{imagePath}}">

угловатый

<img [src]="imagePath">

score 25 · Accepted Answer

25

Скопируйте изображения в папку с ресурсами. Угловой может обращаться к статическим файлам, таким как изображения и файлы конфигурации из папки с данными.

Попробуйте вот так: <img src="assets/img/myimage.png">

score 5 · Accepted Answer

5 ов

Создать папку изображений в папке с ресурсами

<img src="assets/images/logo_poster.png">

score 2 · Accepted Answer

2

Ну, проблема в том, что каким-то образом путь не был распознан, когда была вставлена ??в src переменной. Мне нужно было создать такую ??переменную:

path: any = require ("../../ img / myImage.png");

и тогда я могу использовать его в src. Всем спасибо!

score 2 · Accepted Answer

2

в вашем компоненте назначьте переменную типа,

export class AppComponent {
  netImage:any = "../assets/network.jpg";
  title = 'app';
}

используйте этот netImage в своем src, чтобы получить изображение, как указано ниже,

<figure class="figure">
  <img [src]="netImage" class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure.">
  <figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>