Javascript 如何使用ngStyle（angular2）添加背景图像？

如何使用ngStyle添加背景图像？ 我的代码不起作用：

this.photo = 'http://dl27.fotosklad.org.ua/20121020/6d0d7b1596285466e8bb06114a88c903.jpg';

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

this.photo=http://dl27.fotosklad.org.ua/20121020/6d0d7b1596285466e8bb06114a88c903.jpg';

我想你可以试试这个：

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

通过阅读您的

ngStyle

表达式，我猜您遗漏了一些“'”…

您也可以尝试以下方法：

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

[style.background image]=“'url（'+photo+'）”

从'@angular/platform browser'导入{BrowserModule，domsanizer}”
构造函数（专用消毒器：DomSanitizer）{
this.name='Angular！'
this.backgroundImg=sanitizer.bypassSecurityTrustStyle（'url(http://www.freephotos.se/images/photos_medium/white-flower-4.jpg)');
}

另见

---

看起来您的样式已被清理，若要绕过它，请尝试使用Domsanizer中的bypassSecurityTrustStyle方法

从'@angular/core'导入{Component，OnInit，Input}；
从“@angular/platform browser”导入{domsanizer，SafeStyle}；
@组成部分({
选择器：“我的组件”，
templateUrl:“./my component.component.html”，
样式URL:['./my component.component.scss']
})
导出类MyComponent实现OnInit{
公共背景：安全风格；
@Input（）myObject:任意；
构造函数（私有sanitizer:DomSanitizer）{}
恩戈尼尼特（）{
this.backgroundImg=this.sanitizer.bypassSecurityTrustStyle（'url（'+this.myObject.ImageUrl+'））；
}
}

改用

[ngStyle]="{'background-image':' url(' + instagram?.image + ')'}"

---

我的背景图像不工作，因为URL中有一个空格，因此我需要对其进行URL编码

您可以通过尝试其他没有需要转义字符的图像URL来检查这是否是您遇到的问题

您可以使用内置的Javascripts方法对组件中的数据执行此操作

就我个人而言，我想为它创建一个管道，以便可以在模板中使用它

为此，可以创建一个非常简单的管道。 例如：

src/app/pipes/encode-uri.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'encodeUri'
})
export class EncodeUriPipe implements PipeTransform {

  transform(value: any, args?: any): any {
    return encodeURI(value);
  }
}

src/app/app.module.ts

import { EncodeUriPipe } from './pipes/encode-uri.pipe';
...

@NgModule({
  imports: [
    BrowserModule,
    AppRoutingModule
    ...
  ],
  exports: [
    ...
  ],
 declarations: [
    AppComponent,
    EncodeUriPipe
 ],
 bootstrap: [ AppComponent ]
})

export class AppModule { }

src/app/app.component.ts

import {Component} from '@angular/core';

@Component({
  // tslint:disable-next-line
  selector: 'body',
  template: '<router-outlet></router-outlet>'
})
export class AppComponent {
  myUrlVariable: string;
  constructor() {
    this.myUrlVariable = 'http://myimagewith space init.com';
  }
}

从'@angular/core'导入{Component}；
@组成部分({
//tslint：禁用下一行
选择器：'主体'，
模板：“”
})
导出类AppComponent{
myUrlVariable:string；
构造函数（）{
this.myUrlVariable=http://myimagewith spaceinit.com",；
}
}

src/app/app.component.html

<div [style.background-image]="'url(' + (myUrlVariable | encodeUri) + ')'" ></div>

您可以使用两种方法：

方法1

方法2

---

注意：重要的是在URL周围加上“字符。

大多数情况下，图像不会显示，因为URL包含空格。 在您的例子中，您几乎做了所有正确的事情。除了一件事-您没有像在css中指定背景图像那样添加单引号 即

要执行此操作，请通过“”在HTML中转义quot字符

                                          \/                                  \/
<div [ngStyle]="{'background-image': 'url(\''+ item.color.catalogImageLink + '\')'}"></div>

\/\/

我的解决方案，使用if..else语句。如果希望避免不必要的挫折，检查变量是否存在并已设置，这始终是一个好的做法。否则，请提供备份映像以防万一；您还可以指定多个样式属性，如

背景位置：中心

等

---

为什么要在ngStyle属性上使用方括号？另请参阅RC.1Tested.Working with RC.1中的一个相关问题。根据他们所说的，RC.2和更新版本不需要它。this.photo=`url（${photo}）`；

[style.background image]='photo'

。请记住图片url中的空格（图片名称）可能会导致无提示的

[ngStyle]

和

[style.background image]

渲染失败。这很好。我曾经使用过它，而且效果很好。好的一个@redfox05我想ngStyle是一种语法糖。主要区别是ngStyle允许您应用多个css规则，但是[style]只允许一个。下一个是等效的：

第一个

和

第二个

我使用了这种[style.css]方法，虽然我无法让[style.background repeat]工作，你知道为什么吗？如何使用这种方法进行条件样式设置？比如说，我是否想检查照片是否为空，然后只应用这种样式？