최신 Angular의 ngSrc에 해당하는 것은 무엇입니까?

JSON 객체에서 오는 src와 함께 img를 구현하고 싶습니다.

AngularJS에서는 다음을 수행 할 수 있습니다.

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

Angular 2+에 이와 동등한 것이 있습니까?

AngularJS :

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

각도 2+ :

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

Angular 문서

보간은 동일한 결과를 얻을 수 있습니다.

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

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

양방향 바인딩을 원하지 않는 한 속성 바인딩에 대한이 두 문 사이에는 기술적 인 차이가 없습니다.

보간은 많은 경우 속성 바인딩을위한 편리한 대안입니다. 실제로 Angular는 뷰를 렌더링하기 전에 해당 보간을 해당 속성 바인딩으로 변환합니다. 출처

Angular 애플리케이션에서 ng-src와 동일한 기능을 달성하는 것은 2 단계 프로세스입니다.

첫 번째 단계:

HTML에서 새 구문을 사용하십시오.

<img [src]="imageSrc">

두번째 단계:

구성 요소 / 지시문에서 값을 비어 있도록 초기화하십시오 . 예를 들면 :

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

이제 null요소에 값이 설정되지 않아 네트워크 호출 (빈 호출) 이 제거 됩니다.

다음과 같은 보간 형식으로 작성할 수도 있습니다.

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

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