Angular 4 Img src не работает

Ответ 1

AngularJS

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

угловатый

<img [src]="imagePath">

Ответ 2

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

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

Ответ 3

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

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

Ответ 4

в вашем компоненте присваивается переменная типа

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>

Ответ 5

@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>

Ответ 6

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

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

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

Ответ 7

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

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

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

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

Ответ 8

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>

Ответ 9

Вы должны указать ширину изображения по умолчанию

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

он работает для меня на основе всего другого альтернативного пути.

Ответ 10

Важное замечание о том, как работают привязки атрибутов 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'">, которая может быть как node.src = imagePath ? imagePath : 'something'.

Избегайте связывания с возможными отсутствующими переменными или используйте *ngIf в этом элементе.

Ответ 11

Попробуй это:

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

Ответ 12

Проверьте в your.angular-cli.json в приложении → assets: [], если вы включили папку assets.

Или, может быть, что-то здесь: https://github.com/angular/angular-cli/issues/2231, может помочь.

Ответ 13

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

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

если нет в папке активов, то вы можете использовать этот код.

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

Ответ 14

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, и убедитесь, что папка ресурсов добавлена в параметры сборки.

Ответ 15

Добавить в angular.json

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

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

И в ts: storyPath = 'assets/images/myImg.png';

Ответ 16

Убедитесь, что эти пути правильно отображались на изображениях.