Javascript 角度2-检查图像url是否有效或已损坏
我正在从API获取大量图像URL,并在angular 2 web应用程序中显示它们。有些URL被破坏了,我想用存储在我的Web服务器本地的默认图片替换它们。是否有人建议如何测试URL以及在状态代码404的情况下替换损坏的图像Javascript 角度2-检查图像url是否有效或已损坏,javascript,angular,Javascript,Angular,我正在从API获取大量图像URL,并在angular 2 web应用程序中显示它们。有些URL被破坏了,我想用存储在我的Web服务器本地的默认图片替换它们。是否有人建议如何测试URL以及在状态代码404的情况下替换损坏的图像 谢谢 收听图像元素的错误事件: 其中updateUrl(event){…}为this.someUrl分配一个新值 如果只想签入代码,可以使用中介绍的方法 @指令({ 选择器:“img[默认]”, 主持人:{ '(错误)''updateUrl()', “[src]”:“
谢谢 收听图像元素的
错误事件:
其中updateUrl(event){…}
为this.someUrl
分配一个新值
如果只想签入代码,可以使用中介绍的方法
@指令({
选择器:“img[默认]”,
主持人:{
'(错误)''updateUrl()',
“[src]”:“src”
}
})
类DefaultImage{
@Input()src:string;
@Input()默认值:string;
updateUrl(){
this.src=this.default;
}
}
您可以通过这种方式使用onError
事件来处理无效url
或损坏的url
。
-
<img [src]="invalidPath" onError="this.src='images/angular.png'"/>
通过这种方式,您可以使用onError事件直接将img路径分配给src这是我的多映像回退解决方案。
我们基本上在解析映像后分离ChangeDetector,以便在解析映像后减少vm上的CPU检查周期
import {Component, ChangeDetectionStrategy, ChangeDetectorRef} from 'angular2/core';
import {AppStore} from "angular2-redux-util/dist/index";
@Component({
selector: 'logoCompany',
changeDetection: ChangeDetectionStrategy.Default,
template: `
<div style="padding-top: 7px" >
<span style="color: gainsboro; font-family: Roboto">{{getBusinessInfo('companyName')}}</span>
<!--<img style="width: 35px" class="img-circle" src="http://galaxy.example.me/Resources/Resellers/{{getBusinessInfo('businessId')}}/{{getBusinessInfo('fileName')}}" />-->
<img style="width: 35px" class="img-circle" [src]="getImageUrl()" (load)="onImageLoaded()" (error)="onImageError()" />
</div>
`
})
export class LogoCompany {
constructor(private cdr:ChangeDetectorRef) {
}
private imageRetries:number = 0;
private unsub;
private detach() {
this.cdr.detach();
}
private getImageUrl() {
var url = '';
switch (this.imageRetries){
case 0: {
url = 'http://galaxy.example.me/Resources/Resellers/' + this.getBusinessInfo('businessId') + '/Logo.jpg'
break;
}
case 1: {
url = 'http://galaxy.example.me/Resources/Resellers/' + this.getBusinessInfo('businessId') + '/Logo.png'
break;
}
default: {
url = 'assets/person.png'
break;
}
}
return url;
}
private onImageLoaded() {
this.detach();
}
private onImageError() {
this.imageRetries++;
}
private getBusinessInfo(field):string {
return '12345';
}
}
从'angular2/core'导入{Component,ChangeDetectionStrategy,ChangeDetectorRef};
从“angular2 redux util/dist/index”导入{AppStore};
@组成部分({
选择器:“logoCompany”,
changeDetection:ChangeDetectionStrategy.Default,
模板:`
{{getBusinessInfo('companyName')}
`
})
出口级商标公司{
构造函数(私有cdr:ChangeDetectorRef){
}
私有imageRetries:number=0;
私人不明嫌犯;
私家侦探(){
this.cdr.detach();
}
私有getImageUrl(){
var url='';
开关(this.imageRetries){
案例0:{
url='1〕http://galaxy.example.me/Resources/Resellers/“+this.getBusinessInfo('businessId')+”/Logo.jpg”
打破
}
案例1:{
url='1〕http://galaxy.example.me/Resources/Resellers/“+this.getBusinessInfo('businessId')+”/Logo.png”
打破
}
默认值:{
url='assets/person.png'
打破
}
}
返回url;
}
私有onImageLoaded(){
这个.detach();
}
私有onImageError(){
这个.imageRetries++;
}
私有getBusinessInfo(字段):字符串{
返回“12345”;
}
}
我找到了一个非常简单的解决方案。这并没有检查404,但是我有可能具有and.image属性的对象。我知道这不是他的问题的答案,但希望它能帮助一些人
<img class="list-thumb-img" [attr.src]="item.image?.url ? item.image.url : 'assets/img/140-100.png'">
我使用base64加载微调器:
<img [src]="photoContainer.photo.url | secure" onError="this.src='data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPgo8c3ZnIHdpZHRoPSI0MHB4IiBoZWlnaHQ9IjQwcHgiIHZpZXdCb3g9IjAgMCA0MCA0MCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWw6c3BhY2U9InByZXNlcnZlIiBzdHlsZT0iZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjEuNDE0MjE7IiB4PSIwcHgiIHk9IjBweCI+CiAgICA8ZGVmcz4KICAgICAgICA8c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWwogICAgICAgICAgICBALXdlYmtpdC1rZXlmcmFtZXMgc3BpbiB7CiAgICAgICAgICAgICAgZnJvbSB7CiAgICAgICAgICAgICAgICAtd2Via2l0LXRyYW5zZm9ybTogcm90YXRlKDBkZWcpCiAgICAgICAgICAgICAgfQogICAgICAgICAgICAgIHRvIHsKICAgICAgICAgICAgICAgIC13ZWJraXQtdHJhbnNmb3JtOiByb3RhdGUoLTM1OWRlZykKICAgICAgICAgICAgICB9CiAgICAgICAgICAgIH0KICAgICAgICAgICAgQGtleWZyYW1lcyBzcGluIHsKICAgICAgICAgICAgICBmcm9tIHsKICAgICAgICAgICAgICAgIHRyYW5zZm9ybTogcm90YXRlKDBkZWcpCiAgICAgICAgICAgICAgfQogICAgICAgICAgICAgIHRvIHsKICAgICAgICAgICAgICAgIHRyYW5zZm9ybTogcm90YXRlKC0zNTlkZWcpCiAgICAgICAgICAgICAgfQogICAgICAgICAgICB9CiAgICAgICAgICAgIHN2ZyB7CiAgICAgICAgICAgICAgICAtd2Via2l0LXRyYW5zZm9ybS1vcmlnaW46IDUwJSA1MCU7CiAgICAgICAgICAgICAgICAtd2Via2l0LWFuaW1hdGlvbjogc3BpbiAxLjVzIGxpbmVhciBpbmZpbml0ZTsKICAgICAgICAgICAgICAgIC13ZWJraXQtYmFja2ZhY2UtdmlzaWJpbGl0eTogaGlkZGVuOwogICAgICAgICAgICAgICAgYW5pbWF0aW9uOiBzcGluIDEuNXMgbGluZWFyIGluZmluaXRlOwogICAgICAgICAgICB9CiAgICAgICAgXV0+PC9zdHlsZT4KICAgIDwvZGVmcz4KICAgIDxnIGlkPSJvdXRlciI+CiAgICAgICAgPGc+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik0yMCwwQzIyLjIwNTgsMCAyMy45OTM5LDEuNzg4MTMgMjMuOTkzOSwzLjk5MzlDMjMuOTkzOSw2LjE5OTY4IDIyLjIwNTgsNy45ODc4MSAyMCw3Ljk4NzgxQzE3Ljc5NDIsNy45ODc4MSAxNi4wMDYxLDYuMTk5NjggMTYuMDA2MSwzLjk5MzlDMTYuMDA2MSwxLjc4ODEzIDE3Ljc5NDIsMCAyMCwwWiIgc3R5bGU9ImZpbGw6YmxhY2s7Ii8+CiAgICAgICAgPC9nPgogICAgICAgIDxnPgogICAgICAgICAgICA8cGF0aCBkPSJNNS44NTc4Niw1Ljg1Nzg2QzcuNDE3NTgsNC4yOTgxNSA5Ljk0NjM4LDQuMjk4MTUgMTEuNTA2MSw1Ljg1Nzg2QzEzLjA2NTgsNy40MTc1OCAxMy4wNjU4LDkuOTQ2MzggMTEuNTA2MSwxMS41MDYxQzkuOTQ2MzgsMTMuMDY1OCA3LjQxNzU4LDEzLjA2NTggNS44NTc4NiwxMS41MDYxQzQuMjk4MTUsOS45NDYzOCA0LjI5ODE1LDcuNDE3NTggNS44NTc4Niw1Ljg1Nzg2WiIgc3R5bGU9ImZpbGw6cmdiKDIxMCwyMTAsMjEwKTsiLz4KICAgICAgICA8L2c+CiAgICAgICAgPGc+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik0yMCwzMi4wMTIyQzIyLjIwNTgsMzIuMDEyMiAyMy45OTM5LDMzLjgwMDMgMjMuOTkzOSwzNi4wMDYxQzIzLjk5MzksMzguMjExOSAyMi4yMDU4LDQwIDIwLDQwQzE3Ljc5NDIsNDAgMTYuMDA2MSwzOC4yMTE5IDE2LjAwNjEsMzYuMDA2MUMxNi4wMDYxLDMzLjgwMDMgMTcuNzk0MiwzMi4wMTIyIDIwLDMyLjAxMjJaIiBzdHlsZT0iZmlsbDpyZ2IoMTMwLDEzMCwxMzApOyIvPgogICAgICAgIDwvZz4KICAgICAgICA8Zz4KICAgICAgICAgICAgPHBhdGggZD0iTTI4LjQ5MzksMjguNDkzOUMzMC4wNTM2LDI2LjkzNDIgMzIuNTgyNCwyNi45MzQyIDM0LjE0MjEsMjguNDkzOUMzNS43MDE5LDMwLjA1MzYgMzUuNzAxOSwzMi41ODI0IDM0LjE0MjEsMzQuMTQyMUMzMi41ODI0LDM1LjcwMTkgMzAuMDUzNiwzNS43MDE5IDI4LjQ5MzksMzQuMTQyMUMyNi45MzQyLDMyLjU4MjQgMjYuOTM0MiwzMC4wNTM2IDI4LjQ5MzksMjguNDkzOVoiIHN0eWxlPSJmaWxsOnJnYigxMDEsMTAxLDEwMSk7Ii8+CiAgICAgICAgPC9nPgogICAgICAgIDxnPgogICAgICAgICAgICA8cGF0aCBkPSJNMy45OTM5LDE2LjAwNjFDNi4xOTk2OCwxNi4wMDYxIDcuOTg3ODEsMTcuNzk0MiA3Ljk4NzgxLDIwQzcuOTg3ODEsMjIuMjA1OCA2LjE5OTY4LDIzLjk5MzkgMy45OTM5LDIzLjk5MzlDMS43ODgxMywyMy45OTM5IDAsMjIuMjA1OCAwLDIwQzAsMTcuNzk0MiAxLjc4ODEzLDE2LjAwNjEgMy45OTM5LDE2LjAwNjFaIiBzdHlsZT0iZmlsbDpyZ2IoMTg3LDE4NywxODcpOyIvPgogICAgICAgIDwvZz4KICAgICAgICA8Zz4KICAgICAgICAgICAgPHBhdGggZD0iTTUuODU3ODYsMjguNDkzOUM3LjQxNzU4LDI2LjkzNDIgOS45NDYzOCwyNi45MzQyIDExLjUwNjEsMjguNDkzOUMxMy4wNjU4LDMwLjA1MzYgMTMuMDY1OCwzMi41ODI0IDExLjUwNjEsMzQuMTQyMUM5Ljk0NjM4LDM1LjcwMTkgNy40MTc1OCwzNS43MDE5IDUuODU3ODYsMzQuMTQyMUM0LjI5ODE1LDMyLjU4MjQgNC4yOTgxNSwzMC4wNTM2IDUuODU3ODYsMjguNDkzOVoiIHN0eWxlPSJmaWxsOnJnYigxNjQsMTY0LDE2NCk7Ii8+CiAgICAgICAgPC9nPgogICAgICAgIDxnPgogICAgICAgICAgICA8cGF0aCBkPSJNMzYuMDA2MSwxNi4wMDYxQzM4LjIxMTksMTYuMDA2MSA0MCwxNy43OTQyIDQwLDIwQzQwLDIyLjIwNTggMzguMjExOSwyMy45OTM5IDM2LjAwNjEsMjMuOTkzOUMzMy44MDAzLDIzLjk5MzkgMzIuMDEyMiwyMi4yMDU4IDMyLjAxMjIsMjBDMzIuMDEyMiwxNy43OTQyIDMzLjgwMDMsMTYuMDA2MSAzNi4wMDYxLDE2LjAwNjFaIiBzdHlsZT0iZmlsbDpyZ2IoNzQsNzQsNzQpOyIvPgogICAgICAgIDwvZz4KICAgICAgICA8Zz4KICAgICAgICAgICAgPHBhdGggZD0iTTI4LjQ5MzksNS44NTc4NkMzMC4wNTM2LDQuMjk4MTUgMzIuNTgyNCw0LjI5ODE1IDM0LjE0MjEsNS44NTc4NkMzNS43MDE5LDcuNDE3NTggMzUuNzAxOSw5Ljk0NjM4IDM0LjE0MjEsMTEuNTA2MUMzMi41ODI0LDEzLjA2NTggMzAuMDUzNiwxMy4wNjU4IDI4LjQ5MzksMTEuNTA2MUMyNi45MzQyLDkuOTQ2MzggMjYuOTM0Miw3LjQxNzU4IDI4LjQ5MzksNS44NTc4NloiIHN0eWxlPSJmaWxsOnJnYig1MCw1MCw1MCk7Ii8+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4K'">
我在angular 4上的示例
<img [src]="img" (error)="img.src = errorImg" #img>
式中img—图像路径李>
错误-错误emmit
errorImg-默认img的路径
#img-链接到img对象
完美的角度8指令:
import {AfterViewInit, Directive, ElementRef, Input} from '@angular/core';
@Directive({
selector: '[appImage]'
})
export class ImageDirective implements AfterViewInit {
@Input() src;
constructor(private imageRef: ElementRef) {
}
ngAfterViewInit(): void {
const img = new Image();
img.onload = () => {
this.setImage(this.src);
};
img.onerror = () => {
// Set a placeholder image
this.setImage('assets/placeholder.png');
};
img.src = this.src;
}
private setImage(src: string) {
this.imageRef.nativeElement.setAttribute('src', src);
}
}
现在,HTML将是:
<img [src]="'/some/valid-image.png'" appImage>
如果要更改未加载的图像或源已损坏。。。
Angular 8,只需更改此目标的src作为默认资产:
- 组件HTML
- 组件TS
pictNotLoading(事件){
event.target.src='assets/nopicture.png';
}
对于这个用例,您可以简单地使用三元运算符。
我假设您从远程服务器获得响应
<img src="{{ res.image ? res.image : onErrorFunction() }}"
如果不想让来自服务器的映像使用单引号“”写入路径
此处,如果链接断开,则将转到OneErrorFunction。如果链接未断开,则将加载res.image。为什么会被否决?好吧,这是正确的方法,利用浏览器事件…@GünterZöchbauer有指令来处理这样的事情会好吗。。?有什么想法吗+你说得对。不知何故,我错过了“默认图片”,并进行了一些计算以获得另一个URL。谢谢你,它为我解决了一个有关图像的IIS相对路径问题。乌达老板<代码>/*Angular 11*/@指令({selector:'img[default]',})导出类DefaultImageDirective{constructor(private elem:ElementRef){}@Input()默认='assets/placeholder.png';@HostListener('error')onError():void{this.elem.nativeElement.src=this.default;}
至少检查一下插销。我想的不是正确与否。你说的是什么?不,我没有错,别担心。只是说还有其他选择。这是其中之一。通过这种方式,您可以直接指定路径。感谢@PankajParkarWorks在Angular 6上很好,在Angular 8和9上对我很有用。谢谢@micronyks。这是最干净的方法,没有任何问题。在ngFor中有图像标签的情况下,如何使#img链接(以及错误处理程序中的img引用)动态?我对这个答案投了赞成票,因为它一开始似乎有效,然后我注意到浏览器一直在加载(在Chrome的选项卡中加载微调器),即使所有资源和图像都已正确加载完毕。这是可行的,但是还有一个恼人的无限加载问题。但在编辑问题之前无法撤消我的投票。是。这是最简单的解决办法。Thanksit没有执行指令。我创建了指令,但没有工作!!