img [src] 동적 변경

img [src] 동적 변경

기록 목록이 있는 구성 요소가 있습니다.

export class HomeComponent implements OnInit {

    public wonders: WonderModel[] = [];

    constructor(private ms: ModelService){
        ms.wonderService.getWonders();
        this.wonders = ms.wonderService.wonderList;
    }

    ngOnInit(){}
}

this.dll은 다음과 같은 값 배열을 반환합니다.

이와 같이 ID 값을 동적으로 이미지 소스로 가져오려고 합니다.

<div class="img-content" *ngFor="let wonder of wonders">
    <header class="img-content-header">
        <div style="width: 45px; display: table-cell;"> <img [src]='assets/images/{{wonder.id}}.jpg'  height="40px" width="40px"> </div>
        <div style="display: table-cell;">
            <div>{{wonder.name}}</div>
        </div>
    </header>
</div>

그렇게 하는 동안 이 오류가 발생합니다.

파서 오류: [parser/paracter/{wonder.id }.jpg]의 열 14에 식이 필요한 보간({{}})을(를) 받았습니다.

그것에 대한 가능한 해결책을 제안할 수 있는 사람이 있습니까?

이렇게 묶어야 합니다.

<img src='{{ "assets/images/" + wonder.id + ".jpg" }}'

[]호환되지 않음{{ }}.

다음과 같이 할 수 있습니다.

[src]='"assets/images/"+wonder.id+".jpg"'

OR

src='assets/images/{{wonder.id}}.jpg'

섹션에서 보간 및 속성 바인딩을 사용하고 있습니다.

[src]='assets/images/{{wonder.id}}.jpg'

속성 바인딩을 제거할 수 있습니다.

src='assets/images/{{wonder.id}}.jpg'

또는 보간을 제거합니다.

[src]='assets/images/' + wonder.id + '.jpg'

자세한 내용은 특성 바인딩 또는 각도의 보간을 확인하십시오.

그것은 보간이므로, 당신은 필요하지 않습니다.[]백엔드 유형 스크립트에서 전체 경로를 생성하고 할당할 때 필요하므로 제거하기만 하면 됩니다.[]당신에게 도움이 될 것입니다.

<img src='assets/images/{{wonder.id}}.jpg'  height="40px" width="40px">

---

[]전체 볼트를 바인딩할 때 유용합니다. 이는 유형 스크립트에서 제공됩니다. 예

<img [src]='path'  height="40px" width="40px"> 

유형 스크립트에서 경로 변수가 있습니다.

 const path = 'imagepath.jpg';

언급URL : https://stackoverflow.com/questions/49671139/change-img-src-dynamically