[完善]图片404的显示

src/app/pages/get-out-of-line-details/get-out-of-line-details.component.html

@@ -19,7 +19,10 @@
   <div class="content">
     <div *ngIf="selectedType == 'img'" class="imgbox">
       <ng-container *ngIf="imgUrl; else elseTemplate">
-        <img [src]="imgUrl" alt="">
+        <img [src]="imgUrl" alt="" (error)="imgErr()">
+        <span *ngIf="isSrcError">
+          图片资源未找到
+        </span>
       </ng-container>
       <ng-template #elseTemplate>
         暂无图片

src/app/pages/get-out-of-line-details/get-out-of-line-details.component.ts

@@ -1,86 +1,110 @@
-import { HttpClient } from '@angular/common/http';
-import { Component, OnInit, Input } from '@angular/core';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-import { NzMessageService } from 'ng-zorro-antd/message';
-import { NzModalRef, NzModalService } from 'ng-zorro-antd/modal';
+import { HttpClient } from "@angular/common/http";
+import { Component, OnInit, Input } from "@angular/core";
+import { FormBuilder, FormGroup, Validators } from "@angular/forms";
+import { NzMessageService } from "ng-zorro-antd/message";
+import { NzModalRef, NzModalService } from "ng-zorro-antd/modal";
 @Component({
-  selector: 'app-get-out-of-line-details',
-  templateUrl: './get-out-of-line-details.component.html',
-  styleUrls: ['./get-out-of-line-details.component.scss']
+  selector: "app-get-out-of-line-details",
+  templateUrl: "./get-out-of-line-details.component.html",
+  styleUrls: ["./get-out-of-line-details.component.scss"],
 })
 export class GetOutOfLineDetailsComponent implements OnInit {
-  @Input() data: any
-  @Input() isBtn: any
-  constructor(private http: HttpClient, private message: NzMessageService, private modal: NzModalService, private initialModal: NzModalRef) { }
+  @Input() data: any;
+  @Input() isBtn: any;
+  constructor(
+    private http: HttpClient,
+    private message: NzMessageService,
+    private modal: NzModalService,
+    private initialModal: NzModalRef
+  ) {}
 
-
-  imgUrl: string
-  vedioUrl: string
-  content
-  details
+  imgUrl: string;
+  vedioUrl: string;
+  content;
+  details;
   ngOnInit(): void {
-    console.log(this.data)
-    this.details = this.data.content1
-    this.imgUrl = this.data.violateImage
-    this.vedioUrl = this.data.violateVideo
-    this.content = this.data.handleRecord
+    console.log(this.data);
+    this.details = this.data.content1;
+    this.imgUrl = this.data.violateImage;
+    this.vedioUrl = this.data.violateVideo;
+    this.content = this.data.handleRecord;
   }
 
-
-  selectedType: string = 'img'
+  selectedType: string = "img";
   contentType(type) {
-    this.selectedType = type
+    this.selectedType = type;
   }
-  isPushLoading = false
-  isMisinformationLoading = false
+  isPushLoading = false;
+  isMisinformationLoading = false;
   //推送
   push() {
     this.modal.confirm({
-      nzTitle: '确定推送该预警吗?',
-      nzOkText: '确定',
-      nzOkType: 'primary',
+      nzTitle: "确定推送该预警吗?",
+      nzOkText: "确定",
+      nzOkType: "primary",
       nzOnOk: () => {
-        this.isPushLoading = true
+        this.isPushLoading = true;
         let body = {
           id: this.data.id,
-          positive: true
-        }
-        this.http.post('/api/services/app/ViolateRecordVerification/VerifyViolateRecord', body).subscribe(data => {
-          this.message.create('success', '处置成功！');
-          this.isPushLoading = false
-          this.initialModal.triggerOk()
-        }, err => {
-          this.message.create('error', '处置失败！请联系管理员');
-          this.isPushLoading = false
-        })
+          positive: true,
+        };
+        this.http
+          .post(
+            "/api/services/app/ViolateRecordVerification/VerifyViolateRecord",
+            body
+          )
+          .subscribe(
+            (data) => {
+              this.message.create("success", "处置成功！");
+              this.isPushLoading = false;
+              this.initialModal.triggerOk();
+            },
+            (err) => {
+              this.message.create("error", "处置失败！请联系管理员");
+              this.isPushLoading = false;
+            }
+          );
       },
-      nzCancelText: '取消',
-      nzOnCancel: () => console.log('Cancel')
+      nzCancelText: "取消",
+      nzOnCancel: () => console.log("Cancel"),
     });
   }
   //误报
   misinformation() {
     this.modal.confirm({
-      nzTitle: '判定该预警为误报吗?',
-      nzOkText: '确定',
-      nzOkType: 'danger',
+      nzTitle: "判定该预警为误报吗?",
+      nzOkText: "确定",
+      nzOkType: "danger",
       nzOnOk: () => {
-        this.isMisinformationLoading = true
+        this.isMisinformationLoading = true;
         let body = {
           id: this.data.id,
-          positive: false
-        }
-        this.http.post('/api/services/app/ViolateRecordVerification/VerifyViolateRecord', body).subscribe(data => {
-          this.message.create('success', '处置成功！');
-          this.isMisinformationLoading = false
-          this.initialModal.triggerOk()
-        }, err => {
-          this.isMisinformationLoading = false
-          this.message.create('error', '处置失败！请联系管理员');
-        })
+          positive: false,
+        };
+        this.http
+          .post(
+            "/api/services/app/ViolateRecordVerification/VerifyViolateRecord",
+            body
+          )
+          .subscribe(
+            (data) => {
+              this.message.create("success", "处置成功！");
+              this.isMisinformationLoading = false;
+              this.initialModal.triggerOk();
+            },
+            (err) => {
+              this.isMisinformationLoading = false;
+              this.message.create("error", "处置失败！请联系管理员");
+            }
+          );
       },
-      nzCancelText: '取消',
-      nzOnCancel: () => console.log('Cancel')
+      nzCancelText: "取消",
+      nzOnCancel: () => console.log("Cancel"),
     });
   }
+
+  isSrcError = false;
+  imgErr() {
+    this.isSrcError = true;
+  }
 }