Как добавить фоновое изображение в директиву Angular 2+ с помощью @HostBinding?

Мне нужно создать директиву Angular 2+ (я в 4.x) (НЕ компонент), которая добавляет фоновое изображение через @HostBinding. Я знаю, что я близок, но когда я осматриваю его, я вижу background-image: none в инспекторе Chrome.

import { Directive, HostBinding } from '@angular/core';
import { DomSanitizer, SafeStyle } from '@angular/platform-browser';

@Directive({
    selector: '[myDirectiveWithBackgroundImage]'
})
export class MyDirective {

    @HostBinding('style.background-image')
    public backgroundImage: SafeStyle;

    constructor(private sanitizer: DomSanitizer) {
        this.backgroundImage = this.sanitizer.bypassSecurityTrustStyle(
            'url(assets/images/favicon16.png) no-repeat scroll 7px 7px;'
    );
  }
}

Мои активы/изображения/favicon.16png обслуживаются webpack. Я пробовал всевозможные варианты пути, /assets, ~/assets и т. д. Но background-image всегда none

https://plnkr.co/edit/5w87jGVC7iZ7711x7qWV?p=preview


angular background-image angular2-directives angular2-hostbinding
person jkyoutsey    schedule 21.07.2017    source источник
comment
можно ли создать плунжер?   -  person Max Koretskyi    schedule 21.07.2017
comment
где /assets относительно /src?   -  person Vega    schedule 21.07.2017
comment
@Maximus plnkr.co/edit/5w87jGVC7iZ7711x7qWV?p=preview Однако в plunkr он не добавляет background-image совсем. Это добавляет другие стили.   -  person jkyoutsey    schedule 21.07.2017
comment
@Vega src/main/ui/assets Но при обслуживании активы обслуживаются в корне.   -  person jkyoutsey    schedule 21.07.2017
comment
так что 'url(/main/ui/assets/images/favicon16.png) без повтора прокрутки 7px 7px;'   -  person Vega    schedule 21.07.2017
comment
@Вега без изменений   -  person jkyoutsey    schedule 21.07.2017

Ответы (2)


arrow_upward
7
arrow_downward

фоновое изображение не принимать сокращенные свойства, такие как no-repeat для background-repeat и 7px 7px для background-size. Чтобы использовать сокращенные свойства фона, вам нужно использовать CSS background для @HostBinding('style.background') вместо @HostBinding('style.background-image'), например:

@HostBinding('style.background')
public background: SafeStyle;

constructor(private sanitizer: DomSanitizer) {
  this.background = this.sanitizer.bypassSecurityTrustStyle(
    'url("//ssl.gstatic.com/gb/images/i1_1967ca6a.png") no-repeat scroll 7px 7px'
  );
}

Посмотрите на этот разветвленный плункер, демонстрирующий функциональность в действии.

person Alexander Staroselsky    schedule 21.07.2017
comment
15+ лет разработки HTML, и я должен был это знать! Спасибо! Стоит отметить, что у меня была случайная ; в конце строки, которая тоже нарушала ее. Я обновил свой плункер до рабочего состояния. - person jkyoutsey; 21.07.2017
comment
Если вы хотите включить background-cover, он должен быть в этом формате с / : url("assets/images/backgrounds/bathroom.png") left center / cover no-repeat - person Simon_Weaver; 01.08.2018

arrow_upward
0
arrow_downward

@Alexander Александр Спасибо за добавление кода дезинфицирующего средства.

Интересно, что я вижу это необходимым только в том случае, если у меня есть дополнительные параметры после URL-адреса. Если у меня есть только URL-адрес, он работает, но как только я добавляю «слева вверху», я получаю эту ошибку:

введите здесь описание изображения

person Simon_Weaver    schedule 01.08.2018