Question

在Angular组件的HTML类中，有一个图像显示：

<div class="row" id="work">
  <div class="col-xl-3 col-lg-4 col-md-6 col-sm-12" id="">
      <img class="img-fluid" width="100%" [height]="height" src="assets/images/logo.png" alt="">
      <img class="img-fluid" width="100%" height="100" src="assets/images/logo.png" alt="">
      <img class="img-fluid" width="100%" height="100" src="assets/images/logo.png" alt="">
  </div>
</div>

在该组件的打字稿文件中，我在初始化时将高度变量设置为“ 100”。

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  height = "500";

  constructor() { }

  ngOnInit() {
    this.height = "500";
  }
}

在页面加载时，图像高度等于默认图像高度，它不读取/不使用我的height变量。可能有些愚蠢，但不确定是什么。

编辑：

“ img-fluid”是问题所在。它会忽略height属性，将height设置为auto，所以我自己无法从Typescript设置它。

Answer 1

尝试这样

<img class="img-fluid" width="100%" height="{{height}}" src="assets/images/logo.png" alt="">

Answer 2

@penleychan是正确的，只需将高度用大括号括起来并引用height变量作为其值即可。但是要弄清楚为什么您的显示器不能按原样工作，您只是缺少周围的引号：

height="{{height}}"

如果我没记错的话，加上引号也可以使您的工作正常。但是@penleychan的方法更为普遍。

Answer 3

只需使用

[ngStyle]='{height:height}'

编辑

或这样使用：这里的“ x”是条件（如果有的话），而“ 200px”是默认高度。 [ngStyle]='{height : x ? "200px" :height}'

Answer 4

“ img-fluid”标签是问题所在。它会忽略height属性，将height设置为auto，所以我自己无法使用Typescript进行设置。

将HTML img属性设置为Angular绑定

4 个答案:

编辑