Angular 9 не будет отображать изображение

Question

Я тренируюсь с angular, я пытаюсь отобразить аватар статьи, опубликованный при регистрации, но изображение отображается неправильно.

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

это [src]="imagePath + bp[0].images не работает, моя переменная imagePath хранится в environment.ts: imagePath = 'http://localhost:3000/' (back-server)

Изображение не появляется, и у меня появляется эта ошибка "http://localhost:4200/undefined28-09-08_1609.jpg 404 (Not Found)".

[src]="bp[0].images" это тоже не работает.

компонент создания статьи:

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

Если у кого-то есть идея загрузить изображение! спасибо:)

Answer 1

Ошибка довольно объяснительная.

"http://localhost: 4200 / undefined28-09-08_1609.jpg 404 (не найдено)"

Вы определили imagePath в environment.ts но вам также нужно импортировать это в ваш компонент.

Когда вы пишете <img class="card-img-top" [src]="imagePath + bp[0].images">, Angular будет искать imagePath, определенный в вашем компоненте.

Следующее должно решить вашу проблему

import { environment } from 'environments/environment';

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