html - Angular 9 visar inte bilden

Jag tränar med Angular, jag försöker visa artikelns avatar som postades under registreringen, men bilden visas inte korrekt.

i html:et

<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>

den här [src]="imagePath + bp[0].images fungerar inte, min imagePath-variabel är lagrad i environment.ts: imagePath= 'http://localhost:3000/' (bakserver)

Bilden visas inte och jag har fått detta fel "http://localhost:4200/undefined28-09-08_1609.jpg 404 (Hittades inte)".

[src]="bp[0].images" det fungerar inte heller.

artikelskapande komponent:

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);
  }
}

Om någon har en idé om hur man laddar upp en bild! Tack :)

Svar #1

Felet är ganska förklarande.

"http://localhost:4200/undefined28-09-08_1609.jpg 404 (Hittades ej)"

Du definierade imagePath i environment.ts men du behöver också importera det i din komponent.

När du skriver <img class="card-img-top" [src]="imagePath + bp[0].images">, kommer Angular att leta efter imagePath som definieras i din komponent.

Följande bör lösa ditt problem

import { environment } from 'environments/environment';

export class BlogpostCreationComponent implements OnInit { 
   imagePath = environment.imagePath;
}