Установите атрибут HTML img для привязки Angular
Внутри класса 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";
}
}
При загрузке страницы высота изображения равна высоте изображения по умолчанию, она не читает/не использует мою переменную высоты. Наверное, что-то глупое, но не знаю, что.
Обновлено:
«img-fluid» была проблемой. Он игнорирует атрибут высоты, устанавливает высоту автоматически, поэтому я не мог установить ее сам из Typescript.
[height] = "height"@penleychan не работает
@Oblivion, тогда попробуй это [attr.height] = "height"
@JoelJoseph не работает, может, проблема в моем машинописном тексте?
@Oblivion, здесь работает stackblitz.com/edit/angular-y9f1ci в соответствии с вашим кодом, в чем тогда ваша проблема ??
@ManirajfromKarur отредактировал мой вопрос.
Вы должны проверить свой элемент и поиграть с css, я подозреваю, что есть конфликт с классом начальной загрузки, который вы используете.
@penleychan, ты был прав. Плавное изображение игнорировало атрибут высоты. Это авто, когда жидкость. Спасибо.
Ответы 4
попробуй так
<img class = "img-fluid" width = "100%" height = "{{height}}" src = "assets/images/logo.png" alt = "">
Привет, ни твой ответ, ни [высота] = "высота" не влияют.
Ни не работает, ни ошибок нет, очистил кэш на всякий случай и никакого эффекта.
Вы пробовали ответ @Sachin Gupta?
делал, никакого эффекта
можешь попробовать вот так <img class = "img-fluid" width = "100%" [style] = "{height: height}" src = "assets/images/logo.png" alt = "">
@penleychan прав, просто заключите высоту в фигурные скобки и укажите переменную высоты как ее значение. Но чтобы уточнить, почему ваш не работает как есть, вам просто не хватает окружающих кавычек:
height = "{{height}}"
Если я не ошибаюсь, добавление кавычек заставит вас работать. Но метод @penleychan гораздо более распространен.
Есть ли у вас какие-то внешние стили, вступающие в игру? Вы можете попробовать сделать [ngStyle] = "{'height': height}"
Тоже никакого эффекта. Является ли мой машинописный текст проблемой? (в редакции)
Просто используйте
[ngStyle]='{height:height}'
редактировать
Или используйте так: здесь «x» — это условие (если есть), а «200px» — высота по умолчанию.
[ngStyle]='{height : x ? "200px" :height}'
Привет, никакого эффекта. Думаете, проблема в моем машинописном тексте?
вам нужно установить высоту в «px», «vh» .. или что-то еще, что принимает css
Проблема заключалась в теге «img-fluid». Он игнорирует атрибут высоты, устанавливает высоту автоматически, поэтому я не мог установить ее самостоятельно с помощью Typescript.
просто используйте квадратные скобки
[src] = "url"например[height] = "height"