7

Angular でプロパティ バインディングの例を作成しようとしています。画像を取得し、その 3 つの属性 (幅、高さ、src) をすべてプロパティ バインディングで配置することにしました。驚いたことに、エラーはなく、画像は URL によってレンダリングされていますが (URL にエラーはありません)、それでも幅と高さはゼロ (0) としてレンダリングされています。なぜこれ?私の知る限り、Image は高さと幅をプロパティとして取ります。では、どこに問題があるのでしょうか。

abc.component.html

//This does not work - gives height:0px, width:0px
<img [width]="'100px'" [height]="'100px'" [src]="'./assets/img/hermione.jpg'">

//This works - renders image, with height:100px, width: 100px
<img width="100px" height="100px" [src]="'./assets/img/hermione.jpg'">

2 番目のシナリオがうまく動作するのに、最初のシナリオでは画像がレンダリングされても表示されない (高さ:0px、幅:0px) という奇妙な動作について、誰かが説明できますか?

エラー:

ここに画像の説明を入力

また、(Pronoy Sarkarによると-以下の回答を参照)

//This also works
<img [attr.width]="'100px'" [attr.height]="'100px'" [src]="'./assets/img/hermione.jpg'">

さて、質問は単純な [高さ] と [幅] が機能しない理由です。結局のところ、 [attr.src]を実行したことはありませんか?

4

2 に答える 2