Что эквивалентно ngSrc в Angular2?

Question

Я хотел бы реализовать img, используя src, исходящий из объекта JSON.

В angular1, я мог бы сделать:

<img ng-src="{{hash}}" alt="Description" /> 

Есть ли эквивалент этому в Angular2?

Answer 1

Угловое 1:

<img ng-src="{{movie.imageurl}}"> 

Угловое 2 & 4:

<img [src]="movie.imageurl"> 

Angular docs

---

Обратите внимание, что интерполяция может достичь того же результата:

<img src="{{vehicle.imageUrl}}"> 

<img [src]="vehicle.imageUrl"> 

Технических различий между этими двумя операторами для привязки свойств нет, если вы не желаете двусторонней привязки.

Интерполяция является удобной альтернативой для связывания свойств во многих случаях . Фактически, Angular переводит эти интерполяции в соответствующие привязки свойств до визуализации представления. source

Answer 2

Она также может быть записана в виде интерполяции, как:

<img src="{{movie.imageurl}}"> 

Answer 3

<tr *ngFor="let post of posts | paginate: { id: 'server', itemsPerPage: 
     10, currentPage: p , totalItems: count }"> 

    <td> 
    <img src="https://img.youtube.com/vi/{{post.youtubeVideoId}}/default.jpg"> 
    </td> 

    <td> 
    {{post.videoName}} 
    </td> 

</tr> 

Answer 4

Это двухступенчатый процесс для достижения той же функциональности нг-Src в вашем Angular приложении

Первый этап:

В вашем HTML,

<img [src]="imageSrc">

Второй шаг:

В вашем компоненте/директивы, инициализировать значение быть пустым. Например

@Component({ 
    selector: 'ag-video', 
    templateUrl: './video.component.html' 
}) 
export class SampleComponent { 
    imageSrc = ''; 
} 

Теперь, это свело бы на null сеть вызова (пустой вызов) из-за значения не установлен на элемент.

Надеюсь, что это поможет !!!