CSS Angular 2 中背景图像 url 的属性属性绑定
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37577343/
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
Attribute property binding for background-image url in Angular 2
提问by pingo
I have been struggling to figure out the best way to dynamically change the background-imageattribute in a number of Angular 2components.
我一直在努力找出background-image在许多Angular 2组件中动态更改属性的最佳方法。
In the following example, I am attempting to set the background-imageof a div to an @Inputvalue using [ngStyle]directive:
在以下示例中，我尝试使用指令background-image将 div 的@Input值设置为一个值[ngStyle]：
import {Component, Input} from '@angular/core';
import { User } from '../models';
// exporting type aliases to enforce better type safety (https://github.com/ngrx/example-app)
export type UserInput = User;
@Component({
selector: 'profile-sidenav',
styles: [ `
.profile-image {
background-repeat: no-repeat;
background-position: 50%;
border-radius: 50%;
width: 100px;
height: 100px;
}
`],
template: `
<div class="profile-image" [ngStyle]="{ 'background-image': url({{image}})">
<h3>{{ username }}</h3>
`
})
export class ProfileSidenav {
@Input() user: UserInput;
blankImage: string = '../assets/.../camera.png';
// utilizing "getters" to keep templates clean in 'dumb' components (https://github.com/ngrx/example-app)
get username() {
return this.user.username;
}
get image() {
if (!this.user.image) { return this.cameraImage;
} else { return this.user.image; }
}
I don't think the issue is with the observable, since usernamedisplays and doing something like <img *ngIf="image" src="{{ image }}">renders the image. I have to access the background-imageattribute because apparently that is the best way to make a circular image, but in general would like to know how to do this.
我不认为问题出在 observable 上，因为username显示和执行诸如<img *ngIf="image" src="{{ image }}">渲染图像之类的操作。我必须访问该background-image属性，因为显然这是制作圆形图像的最佳方式，但通常想知道如何执行此操作。
EDIT:
编辑：
My original [ngStyle]declaration had unnecessary curly brackets (ngStyle is a directive that can take a variable), and was missing string tags around url()and image. The correct way is (as answered below) is:
我的原始[ngStyle]声明有不必要的大括号（ngStyle 是一个可以接受变量的指令），并且在url()和周围缺少字符串标签image。正确的方法是（如下回答）是：
<div class="profile-image" [ngStyle]="{'background-image': 'url(' + image + ')'}"></div>`.
As statedin the original edit, a solution can also be achieved with the Rendererclass in Angular 2. I have yet to do it but think there should be a way with setElementStylesor something like that. I will try to post an example but would love if someone else showed me (and others) how to for the time being.
至于说在原来的编辑，一个解决方案也可以与实现渲染器在角2班，我还没有做到这一点，但认为应该有一个办法setElementStyles或者类似的东西。我会尝试发布一个示例，但如果其他人暂时向我（和其他人）展示了如何操作，我会很高兴。
回答by Thierry Templier
I think that you should use something like that:
我认为你应该使用这样的东西：
<div class="profile-image"
[ngStyle]="{ 'background-image': 'url(' + image + ')'}">
where imageis a property of your component.
image您的组件的属性在哪里。
See this question:
看到这个问题：
回答by redfox05
You don't need to use NgStyle. You can also do this:
你不需要使用 NgStyle。你也可以这样做：
[style.background-image]="'url(' + image + ')'"
[style.background-image]="'url(' + image + ')'"
See more at How to add background-image using ngStyle (angular2)?
回答by Tanvir Alam
The main reason is simple, you declared a global variable as blankImagebut in the template you called imageinstead of blankImage.
主要原因很简单，您声明了一个全局变量 asblankImage但在您调用的模板中image而不是blankImage.
Your ts code variable blankImage
您的 ts 代码变量 blankImage
blankImage: string = '../assets/.../camera.png';
Your template code variable image
您的模板代码变量 image
<div class="profile-image" [ngStyle]="{'background-image': 'url(' + image + ')'}"></div>
回答by Amir.S
that's wrong
那是错的
I think you should add:
我认为你应该补充：
<div class="profile-image" [ngStyle]="{ 'backgroundImage': url({{image}})">
Regards
问候
