如何设置Angular 4的背景图像？

bvpmtnay 于 2022-09-18 发布在 Java

关注(0)|答案(3)|浏览(204)

我试着用下面的几行代码来设置背景图像，但不起作用。在我的应用程序中经常设置背景图像的方式有哪些。

app.Component.html

<div [ngStyle]="{'background' : 'url(./images/trls.jpg)'}">
    <router-outlet></router-outlet>
    <alert></alert>
</div>

JavaScript

来源：https://stackoverflow.com/questions/45632663/how-to-set-angular-4-background-image

3条答案

按热度按时间

xzlaal3s1#

您可以使用ngStyle设置div的背景

<div [ngStyle]="{background-image: 'url(./images/' + trls.img + ')'}"></div>

或者，您也可以使用内置背景样式：

<div [style.background-image]="'url(/images/' + trls.img + ')'"></div>

赞(0）回复(0）举报 2022-09-18

r6vfmomb2#

这对我很管用：

在您的标记中添加以下内容：

<div class="panel panel-default" [ngStyle]="{'background-image': getUrl()}">

然后在组件中：

getUrl()
{
  return "url('http://estringsoftware.com/wp-content/uploads/2017/07/estring-header-lowsat.jpg')";
}

赞(0）回复(0）举报 2022-09-18

q9rjltbz3#

下面的答案适用于4/5的Angular 。

在app.Component.css中

.image{
     height:40em; background-size:cover; width:auto;
     background-image:url('copied image address');
     background-position:50% 50%;
   }

同样在app.Component.html中，只需添加以下内容

<div class="image">
Your content
</div>

通过这种方式，我可以将背景图像设置为4/5的Angular 。

赞(0）回复(0）举报 2022-09-18

我来回答

如何设置Angular 4的背景图像？

3条答案

相关问题

热门标签

最新问答