浏览器正在接收具有200状态的text/html类型的图像

Question

网络请求显示图像正从NestJs服务器返回到前端(ANGULAR 13(，但类型为text/html，状态为200和initiator:platform-broweser.mjs。控制台上没有错误。图像路径存储在MongoDb中，路径附带产品。我想将text/html响应转换为上传到服务器的实际图像，并使图像可见，因为带有详细信息的产品是可见的，但图像不可见。">

此处显示所有产品

BookForm = new FormGroup({
_id: new FormControl(''),
name: new FormControl(''),
author: new FormControl(''),
price: new FormControl(''),
genres_name: new FormControl(''),
coverimage: new FormControl(''),
});
results?: Book[];
constructor(
private readonly apiService: ApiService,
private router: Router,
) {}
ngOnInit() {
this.apiService.getallbooks().subscribe((data: Book[]) => {
this.results = data;
});
}

显示所有产品html

<div class="grid" *ngFor="let result of results">
<div class="blog-card spring-fever" style="padding: 0.5rem; z-index: 100">
<img
class="image"
src="http://localhost:3000/{{ result.coverimage }}"
alt=""
height="400px"
width="250px"
style="border: 1px solid red"
/>

角度文件上传编码base64

imagedata?: string;
async uploadimage(event: any) {
const file = event.target.files[0];
this.AddbookForm.patchValue({ coverimage: file });
const allowedMimeTypes = ['image/png', 'image/jpeg', 'image/jpg'];
this.AddbookForm.get('coverimage')?.updateValueAndValidity();
if (file && allowedMimeTypes.includes(file.type)) {
const reader = new FileReader();
reader.onload = () => {
this.imagedata = reader.result as string;
};
reader.readAsDataURL(file);
console.log(file);
}
}

Answer 1

默认情况下，Angular中任何HTTP调用的响应类型都是JSON类型。您需要明确地告诉Angular响应类型。使用responseType作为blob来实现这一点。

例如：

this.httpClient.get('url', params,
{
observe: 'response',
responseType: 'blob'
});

Answer 2

这里的实际问题不是type，实际问题在我的URL中。我在NestJs服务器中有一个名为assets的文件夹，位于root，我已经设置了图像的路径(在NestJ的文件上传代码中(，就像这个./assets/。这也是设置目标文件夹的正确方法。我能够在浏览器上看到像http://localhost:3000/imagename.png这样的图像，这意味着我的服务器被配置为通过根URL服务器/服务我的图像，所以我可以访问它们http://localhost:3000/imagename.png。但是我的api以URL中包含./assets/的格式返回图像。因此，使用以下代码

<div *ngIf="result.coverimage">
<img
class="image"
src="http://localhost:3000/{{ result.coverimage }}"
alt=""
height="400px"
width="250px"
style="border: 1px solid red"
/>
</div>

我假设我用pipe safurl点击像这样的Urlhttp:localhost:3000/imagename.png来净化并告诉Angular这个Url是安全的。但实际上Angular看到的URL是这样的http:localhost:3000/./assets/imagename.png。请注意，这是正确的URL格式。url不适用于.或,。此外，由于我的服务器是在根目录下配置的，所以这个urlhttp;//localhost:3000/assets/imagename.png也是错误的。root意味着，无论root设置了什么，都可以在服务器的端口号之后直接访问。示例http://localhost:YourServerPortNumber/TheThing_Set_at_Root。

因此，此问题的解决方案如下

src="http://localhost:3000/{{
result.coverimage.replace('./assets/', '')
}}"

还有这个

<div *ngIf="result.coverimage">
<img
class="image"
src="http://localhost:3000/{{
result.coverimage.replace('./assets/', '')
}}"
alt=""
height="400px"
width="250px"
style="border: 1px solid red"
/>
</div>

对于上面的.replace('./assets/', '')，我们正在移除./assets/，并用''空空间重新分解它。所以现在URL的格式是http://localhost:3000/imagename.png。