控制台显示图像中显示的错误,需要摆脱它

时间:2018-05-28 08:27:08

标签: spring angular5

error image

请查看上图。我只需要摆脱控制台显示的错误。该图像不存在于我的本地目录中,我通过显示其他图像来管理ui中的大小写,但控制台仍显示此错误。有没有人有解决问题的方法。只需摆脱404.任何帮助将不胜感激。

Java代码: API:

@GetMapping("/files/{filename:.+}")
        @ResponseBody
        public ResponseEntity<Resource> getFile(@PathVariable String filename) {
            if(filename != null) {
                Resource file = customerController.loadFile(filename);
                if(file != null) {

                    return ResponseEntity.ok()
                            .header(HttpHeaders.CONTENT_DISPOSITION, "attachment; filename=\"" + file.getFilename() + "\"")
                            .body(file);

                }else {
                    return ResponseEntity.ok().header(HttpHeaders.CONTENT_DISPOSITION, "attachment; filename=\"")
                            .body(null);

                }
            }else {
                return ResponseEntity.ok().header(HttpHeaders.CONTENT_DISPOSITION, "attachment; filename=\"")
                        .body(null);
            }

        }


Controller:
    //customer logo image upload related api
    public Resource loadFile(String filename) {
        try {
            if(filename != null) {
                Path rootLocation = Paths.get(this.customerLogoPath);
                Path file = rootLocation.resolve(filename);
                Resource resource = new UrlResource(file.toUri());
//              System.out.println(resource);
                if (resource.exists() && resource.isReadable()) {
                    return resource;
                } else {
                    return null;
                }
            }else {
                return null;
            }

        } catch (MalformedURLException e) {
            throw new RuntimeException("FAIL!");
        }
    }

代码的角度方面:

Component.ts

getLogos(customer){

      let fileName = customer.customerLogoPath;
      //console.log(fileName);
      if(fileName != null && fileName != undefined && fileName != 'null'){
        //imageget
          this.http.get(this.apiEndPoint+""+fileName)
          .map( res => JSON.parse(JSON.stringify(res)))
          .catch(error => Observable.throw(error))
          .subscribe(
            image => {
              //console.log(image);
            },
            error => {
              //  console.log(error);
              if(error.status !== 404) {
                if(error.url !== null && error.url != "" && !error.url.includes('null')){

                  customer.customerLogoPath = error.url;
                  //console.log(error.url);
                }else{
                  customer.customerLogoPath  = '/assets/images/no-img.png';
                }
              }

            })
      }else{
        customer.customerLogoPath  = '/assets/images/no-img.png';
      }

  }


Component.html:


<div class="row">
                                                            <div class="box-ctn-img col-3 mx-auto text-center"  *ngIf = "customer.customerLogoPath == null && customer.customerLogoPath == undefined">
                                                                <img  src="/assets/images/no-img.png" class="rounded mx-auto d-block img-fluid">
                                                            </div>
                                                            <div class="box-ctn-img col-3 mx-auto text-center" style="margin-right: 25px;" *ngIf = "customer.customerLogoPath !== null && customer.customerLogoPath !== undefined">
                                                                    <img  src ="{{customer?.customerLogoPath}}" class="rounded mx-auto d-block img-fluid">
                                                            </div>

                                                            <div class="box-ctn-dic col-9">
                                                                <h4>[ {{customer.customerCode}} ] -
                                                                    <span>{{customer.customerName}}</span>
                                                                </h4>
                                                                <h3>
                                                                    <span>{{customer.defaultWarehouse?.name}}</span>
                                                                </h3>
                                                                <h3>
                                                                    <span>{{customer.dept?.deptName}}</span>
                                                                </h3>
                                                            </div>
                                                        </div>

谢谢!

0 个答案:

没有答案