Javascript 如何设置 Angular 4 背景图片？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/45632663/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to set Angular 4 background image?
提问by Manihtraa
I am trying the following lines to set the background image.but it not works. what are the way set background image in constantly in my application.
我正在尝试使用以下几行设置背景图像。但它不起作用。在我的应用程序中不断设置背景图像的方式是什么。
app.component.html
应用程序组件.html
<div [ngStyle]="{'background' : 'url(./images/trls.jpg)'}">
<router-outlet></router-outlet>
<alert></alert>
</div>
回答by Akash Agrawal
回答by Richard Strickland
This works for me:
这对我有用：
put this in your markup:
把它放在你的标记中：
<div class="panel panel-default" [ngStyle]="{'background-image': getUrl()}">
then in component:
然后在组件中：
getUrl()
{
return "url('http://estringsoftware.com/wp-content/uploads/2017/07/estring-header-lowsat.jpg')";
}
回答by Sachin Hatikankan
Below answer worked for angular 4/5.
以下答案适用于角度 4/5。
In app.component.css
在 app.component.css 中
.image{
height:40em; background-size:cover; width:auto;
background-image:url('copied image address');
background-position:50% 50%;
}
Also in app.component.html simply add as below
同样在 app.component.html 中简单地添加如下
<div class="image">
Your content
</div>
This way I was able to set background image in Angular 4/5.
这样我就可以在 Angular 4/5 中设置背景图像。
回答by Murry is Developing
If you plan using background images a lot throughout your project you may find it useful to create a really simple custom pipe that will create the url for you.
如果您计划在整个项目中大量使用背景图像，您可能会发现创建一个非常简单的自定义管道来为您创建 url 很有用。
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'asUrl'
})
export class BackgroundUrlPipe implements PipeTransform {
transform(value: string): string {
return `url(./images/${value})`
}
}
Then you can add background images without all the string concatenation.
然后您可以添加没有所有字符串连接的背景图像。
<div [ngStyle]="{ background: trls.img | asUrl }"></div>
回答by Mark Macneil Bikeio
In Html
在 HTML 中
<div [style.background]="background"></div>
In Typescript
在打字稿中
this.background=
this.sanitization.bypassSecurityTrustStyle(`url(${this.section.backgroundSrc}) no-repeat`);
A working solution.
一个有效的解决方案。
What is the recommended way to dynamically set background image in Angular 4
回答by netalex
this one is working for me also for internet explorer:
这个对我也适用于 Internet Explorer：
<div class="col imagebox" [ngStyle]="bkUrl"></div>
...
...
@Input() background = '571x450img';
bkUrl = {};
ngOnInit() {
this.bkUrl = this.getBkUrl();
}
getBkUrl() {
const styles = {
'background-image': 'url(src/assets/images/' + this.background + '.jpg)'
};
console.log(styles);
return styles;
}
回答by Nodirabegimxonoyim
I wanted a profile picture of size 96x96 with data from api. The following solution worked for me in project Angular 7.
我想要一张 96x96 大小的个人资料图片，其中包含来自 api 的数据。以下解决方案在项目Angular 7 中对我有用。
.ts:
.ts：
@Input() profile;
.html:
.html：
<span class="avatar" [ngStyle]="{'background-image': 'url('+ profile?.public_picture +')'}"></span>
.scss:
.scss：
.avatar {
border-radius: 100%;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
width: 96px;
height: 96px;
}
Please note that if you write backgroundinstead of 'background-image'in [ngStyle], the styles you write (even in styleof element) for other background properties like background-position/size, etc. won't work. Because you will already fix it's properties with background: 'url(+ property +) (no providers for size, position, etc. !)'. The [ngStyle]priority is higher than styleof element. In backgroundhere, only url() property will work. Be sure to use 'background-image'instead of 'background'in case you want to write more properties to background image.
请注意，如果您编写background而不是'background-image'in [ngStyle]，则您style为其他背景属性（例如 background-position/size 等）编写的样式（甚至在元素中）将不起作用。因为你已经用background: 'url(+ property +) (no providers for size, position, etc. !)'. 的[ngStyle]优先级高于style元件。在background这里，只有 url() 属性会起作用。如果您想将更多属性写入背景图像，请务必使用'background-image'代替'background'。
