Angular 9 won't display image - html

Question

I'm training with angular, i'm trying to display article's avatar that posted during registration, but image not appear correctly.
in the html :
<ng-container *ngIf="blogpost$ | async as bp; else loading">
<div class="card text-white bg-secondary mb-3" style="max-width: 18rem;">
<img class="card-img-top" [src]="imagePath + bp[0].images">
<div class="card-header">{{ bp[0].title }}</div>
<div class="card-body">
<h5 class="card-title">{{ bp[0].subtitle }}</h5>
<p class="card-text">
{{ bp[0].content }}
</p>
</div>
<i class="material-icons" style="cursor: pointer;" [routerLink]="['edit']">
edit
</i>
</div>
</ng-container>
<ng-template #loading>Loading post ...</ng-template>
this [src]="imagePath + bp[0].images doesn't work
my imagePath variable is stored in environment.ts:
imagePath= 'http://localhost:3000/'(back-server)
The image doesn't appear and i've got this error "http://localhost:4200/undefined28-09-08_1609.jpg 404 (Not Found)".
[src]="bp[0].images" this doesn't work either.
article creation component:
import { Component, OnInit, ElementRef } from '#angular/core';
import { FormGroup, FormBuilder } from '#angular/forms';
import { BlogpostService } from '../blogpost-service';
import { Router } from '#angular/router';
#Component({
selector: 'app-blogpost-creation',
templateUrl: './blogpost-creation.component.html',
styleUrls: ['./blogpost-creation.component.css'],
})
export class BlogpostCreationComponent implements OnInit {
creationForm: FormGroup;
fileToUpload: File = null;
uploadPath: string = null;
constructor(private router: Router, private fb: FormBuilder, private blogPostService: BlogpostService) {}
ngOnInit() {
this.createForm();
}
createForm() {
this.creationForm = this.fb.group({
title: '',
subTitle: '',
content: '',
images: '',
});
}
createBlog() {
if (this.creationForm.valid) {
if (this.fileToUpload) {
this.blogPostService.uploadImage(this.fileToUpload).subscribe(
data => console.log('image', data),
error => console.log('error', error),
);
}
console.log('formGrp', this.creationForm);
this.blogPostService.createBlogPost(this.creationForm.value).subscribe(
data => console.log('DATA posted', data),
error => this.handleError(error),
);
if (this.creationForm.value) {
this.router.navigate(['']);
}
} else if (this.creationForm.valid) {
this.blogPostService.createBlogPost(this.creationForm.value).subscribe(
data => (this.fileToUpload = null),
error => this.handleError(error),
);
}
}
handleFileInput(event) {
this.fileToUpload = event.target.files[0];
console.log('uploaded file', this.fileToUpload);
}
handleSuccess(data) {
console.log('Post send', data);
}
handleError(error) {
console.log('Error when try to send post', error);
}
}
If someone have an idea to load an image! thank you :)

Answer 1

The error is pretty explanatory.
"http://localhost:4200/undefined28-09-08_1609.jpg 404 (Not Found)"
You defined imagePath in environment.ts but you also need to import that in your component.
When you write <img class="card-img-top" [src]="imagePath + bp[0].images">, Angular will look for imagePath defined in your component.
Following should solve your problem
import { environment } from 'environments/environment';
export class BlogpostCreationComponent implements OnInit {
imagePath = environment.imagePath;
}