当化身从后端加载并尝试以角度显示图片视图时。 Angular被视为图像类型text / html。因此,有一个错误:
获取http://localhost:4200/photos/original/missing.png 404(未找到)
我不明白问题是什么。
html:
<div class="card-avatar" *ngIf="authService.currentUserData">
<ng-container *ngFor="let photo of filteredPhotos">
<a>
<img [src]="photo.photo" name="photo">
</a>
</ng-container>
</div>
ts:
filteredPhotos =[];
private loadPhotos() {
let filteredPhotos;
if (this.servPhoto) {
this.servPhoto.getPhotos().subscribe(photo => {
if(!this.authService.currentUserData) { return; }
this.photos = photo;
this.filteredPhotos = this.photos.filter((photo) => photo.users_id == this.authService.currentUserData.id);
});
}
}
photo.model.ts:
export class Photo{
constructor(
public users_id: number,
public photo: Blob
) { }
}
答案 0 :(得分:0)
如果您使用的是Angular CLI,则将photos文件夹添加到angular.json(angular cli 6.0)或.angular-cli.json(angular cli <6)中的资产中。
"assets": [
"src/photos",
"src/favicon.ico"
],
如果您使用的是Webpack,请使用copywebpack插件(const CopyWebpackPlugin = require('copy-webpack-plugin'); )
new CopyWebpackPlugin([
{ from: 'src/photos', to: 'photos' }]
答案 1 :(得分:-1)
问题出在服务器端,而不是角度
它的作用是将每个网址作为html页面,
您需要做的是将资产文件夹设置为公用,然后尝试直接访问它。
如果服务器位于节点中,并且您正在使用express then,那么这是您需要编写的行,以提供对服务器/资产文件夹的公共访问权限
app.use('/assets' , express.static('server/assets/'));