У меня следующая проблема. У меня есть компонент, у которого есть строковое значение @Input, которое является ссылкой на изображение.
В моем HTML-файле есть:
<div class = "parallax" [ngStyle] = "{'background-image': 'url({{parallaxImage}})'}"></div>
но он явно не работает (возникает ошибка, и страница вообще не отображается). Какой синтаксис мне следует использовать для достижения моей цели? Я также попытался превратить это в функцию:
.ts файл
getParallaxImage(){
return "'url(" + this.parallaxImage + ")'";
}
.html файл
<div class = "parallax" [ngStyle] = "{'background-image': getParallaxImage()}"></div>
Теперь страница отображается, но фоновое изображение не установлено.
Попробуй это
<div class = "parallax" [ngStyle] = "{'background-image': 'url('+ parallaxImage+')'}"></div>
или же
getParallaxImage(){
return "url(" + this.parallaxImage + ")";
}
Оба решения теперь будут работать, используйте их в соответствии с вашими требованиями.
Это также должно работать:
[style.background-image] = "'url(' + parallaxImage + ')'"
проверьте это stackoverflow.com/a/50037677/4399281