gpt4 book ai didi

背景图像上的 Angular (负载)

转载 作者:搜寻专家 更新时间:2023-10-30 21:48:43 29 4
gpt4 key购买 nike

我正在使用 Angular 5,我正在尝试在加载 div 的背景图像时获取加载图标。
如果它是一个普通的 img,我对此没有问题,但如果我尝试将它作为背景,它就不起作用。

这里是一些示例代码

app.component.html

<div class="test" [someDirective]="'some/otherImg.jpg'"></div>  
<img class="test" [someDirective]="'some/OtherImg.jpg'">

app.component.css

.test{
width: 300px;
height: 200px;
}

some.directive.ts

import { Directive, ViewChild, Input, ElementRef, HostListener } from '@angular/core';
@Directive({
selector: '[someDirective]'
})
export class SomeDirective {
@Input() someDirective:string;

constructor(private element:ElementRef){
element.nativeElement.src = 'some/imgUrl.gif';
element.nativeElement.style = "background-image: url('some/imgUrl.gif')";
}

@HostListener('load', ['$event'])
onLoad() {
this.element.nativeElement.src = "some/otherImg.jpg";
this.element.nativeElement.style = "background-image: url('some/otherImg.jpg')";
}
}

有没有办法让它工作,以便背景也以与普通图像相同的方式加载?

我应该提一下,让加载的 gif 充当背景图像没有问题,它工作正常但不会改变。

最佳答案

不要直接操作 ElementRef。使用 Renderer 类。使用可观察对象尝试此实现。就像提到的 zmanc 一样,您不能使用 background-url 技术。坚持使用 src 属性。

import { Directive, ElementRef, Renderer2, HostListener } from '@angular/core';

import { fromEvent } from 'rxjs/observable/fromEvent';
import { first } from 'rxjs/operators';

@Directive({
selector: '[load]',
})
export class LoadImageDirective {
constructor(private renderer: Renderer2, private el: ElementRef) { }

ngOnInit() {
fromEvent(this.el.nativeElement, 'load')
.pipe(first())
.subscribe(() => this.setImage())

this.setPlaceholder();

}

private setPlaceholder() {
this.renderer.setAttribute(
this.el.nativeElement,
'src', `https://via.placeholder.com/50x50`
)
}


private setImage = () => {
this.renderer.setAttribute(
this.el.nativeElement,
'src', `https://http.cat/400`
)
}
}

Live demo

关于背景图像上的 Angular (负载),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49856414/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com