请查看上图。我只需要摆脱控制台显示的错误。该图像不存在于我的本地目录中,我通过显示其他图像来管理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>
谢谢!