Angular 4 img src не знайдено

У мене проблема з джерелом зображення із кутовим 4. Це постійно говорить мені, що зображення не знайдено.

Структура папки:

app_folder/
app_component/
  - my_componenet
  - image_folder/
      - myimage

Я використовую зображення в mycomponent. Якщо є mycomponent, я вставляю його безпосередньо з:

<img src="img/myimage.png"

Це працює нормально, але я перевірив html, і він створює хеш. Але мої зображення потрібно динамічно додавати до html, оскільки вони є частиною списку. Отже, якщо я використовую:

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

що в основному img/myimage.pngне працює. Якщо я використовую:

<img [src]="imagePath">

Це говорить NOT FOUND (htttps://localhost/img/myimage.png). Можеш допомогти мені?

AngularJS

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

Кутовий

<img [src]="imagePath">

Скопіюйте свої зображення в папку активів. Angular може отримувати доступ лише до статичних файлів, таких як зображення та конфігураційні файли, з папки активів.

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

Створіть папку зображень під папкою активів

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

Кутові від 4 до 8

Або працює

<img [src]="imageSrc" [alt]="imageAlt" />

<img src="{{imageSrc}}" alt="{{imageAlt}}" />

і Компонент буде

export class sample Component implements OnInit {
   imageSrc = 'assets/images/iphone.png'  
   imageAlt = 'iPhone'

Деревоподібна структура:

-> src 
   -> app
   -> assets
      -> images
           'iphone.png'

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

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>

@Annk ви можете створити змінну у файлі __component.ts

myImage: string = " http://example.com/path/image.png ";

і всередині файлу __. component.html ви можете використовувати один із цих 3 методів:

1.

<div> <img src="{{myImage}}"> </div>

2.

<div> <img [src]="myImage"/> </div>

3.

<div> <img bind-src="myImage"/> </div>

Ну, проблема полягала в тому, що якимось чином шлях не розпізнавався, коли його вставляла srcзмінна. Мені довелося створити таку змінну:

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

а потім я можу використовувати його в src. Дякую всім!

Ви повинні вказати ширину зображення за замовчуванням

 <img width="300" src="assets/company_logo.png">

це працює для мене на основі всіх інших альтернативних способів.

<img src="images/no-record-found.png" width="50%" height="50%"/>

Ваша папка із зображеннями та ваш index.html повинні знаходитися в одному каталозі (дотримуйтесь наступної структури каталогів). це буде працювати навіть після збірки

Структура каталогу

-src
    |-images
    |-index.html
    |-app 

Angular може отримувати доступ лише до статичних файлів, таких як зображення та конфігураційні файли, з папки активів. Хороший спосіб завантажити шлях рядка віддаленого збереженого зображення і завантажити його в шаблон.

  public concateInnerHTML(path: string): string {
     if(path){
        let front = "<img class='d-block' src='";
        let back = "' alt='slide'>";
        let result = front + path + back;
        return result;
     }
     return null;
  }

В інтерфейсі DoCheck імплементу компонента та в ньому формула бази даних. Запит до бази даних - це лише зразок.

ngDoCheck(): void {
   this.concatedPathName = this.concateInnerHTML(database.query('src'));
}

І в HTML-шаблоні <div [innerHtml]="concatedPathName"></div>

Важливе спостереження за тим, як працюють прив'язки атрибутів Angular 2, 2+.

Проблема з тим, що [src]="imagePath"не працює, поки виконуються такі дії:

• <img src="img/myimage.png">
• <img src={{imagePath}}>

Належить ваша декларація про прив’язку, [src]="imagePath"безпосередньо прив’язана до компонента this.imagePathабо, якщо вона є частиною циклу ngFor, тоді *each.imagePath.

Однак у двох інших робочих варіантах ви або прив'язуєте рядок до HTML, або дозволяєте прив'язувати HTML до змінної, яка ще не визначена.

HTML не видасть жодної помилки, якщо ви прив'яжете <img src=garbage*Th_i$.ngs>, проте Angular зробить.

Моя рекомендація полягає у використанні вбудованого, якщо у випадку, якщо змінна може бути не визначена , наприклад <img [src]="!!imagePath ? imagePath : 'urlString'">, що може бути як as node.src = imagePath ? imagePath : 'something'.

Уникайте прив’язки до можливих відсутніх змінних або добре використовуйте *ngIfцей елемент.

Перевірте у вашому.angular-cli.json в додатку -> активи: [], якщо ви включили папку активів.

Або, можливо, щось тут: https://github.com/angular/angular-cli/issues/2231 , може допомогти.

Ви повинні використовувати цей код в angular, щоб додати шлях до зображення. якщо ваші зображення знаходяться в папці "активи".

<img src="../assets/images/logo.png" id="banner-logo" alt="Landing Page"/>

якщо не в папці активів, ви можете використовувати цей код.

<img src="../images/logo.png" id="banner-logo" alt="Landing Page"/>

Angular-cli за замовчуванням включає папку активів до параметрів збірки. Я отримав цю проблему, коли в назві моїх зображень були пробіли або тире. Наприклад :

• 'my-image-name.png' має бути 'myImageName.png'
• 'my image name.png' має бути 'myImageName.png'

Якщо ви помістили зображення в папку assets / img, тоді цей рядок коду повинен працювати у ваших шаблонах:

<img [alt]="My image name" src="./assets/img/myImageName.png'">

Якщо проблема не зникає, просто перевірте, чи встановлений файл конфігурації Angular-cli та переконайтеся, що папка ваших активів додана до параметрів збірки.

Додайте в angular.json

  "assets": [
              "src/favicon.ico",
              "src/assets"
            ],

А потім використовуйте його так: <img src={{imgPath}} alt="img"></div>

А в ц: storyPath = 'assets/images/myImg.png';

Спробуйте це:

<img class="img-responsive" src="assets/img/google-body-ads.png">