Установите для атрибута HTML img значение Угловое связывание

Question

Внутри класса HTML для моего компонента Angular у меня есть изображение, отображаемое с:

<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";
  }
}

При загрузке страницы высота изображения равна высоте изображения по умолчанию, если она не используется для чтения / использования моей переменной высоты. Возможно, что-то глупое, но не уверен, что.

EDIT:

"img-Fluid" была проблема. Он игнорирует атрибут высоты, устанавливает высоту в авто, поэтому я не могу установить его самостоятельно из Typescript.

Answer 1

Проблема с тегом img-Fluid.Он игнорирует атрибут высоты, устанавливает высоту на авто, поэтому я не могу установить его сам с Typescript.

Answer 2

@ penleychan является правильным, просто оберните высоту в фигурные скобки и укажите переменную высоты в качестве значения.Но чтобы выяснить, почему у вас не работает как есть, вы просто пропустите окружающие кавычки:

height="{{height}}"

Если я не ошибаюсь, добавление кавычек заставит вашу работу работать какЧто ж.Но метод @ penleychan гораздо более распространен.

Answer 3

Просто используйте

[ngStyle]='{height:height}'

edit

Или используйте так: здесь «x» - это условие (если есть), а «200px» - высота по умолчанию.[ngStyle]='{height : x ? "200px" :height}'

Answer 4

попробуй вот так

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