CODEWITHSUNDEEP
htmlangulartypescript
LinebakeR
LinebakeR

Reputation: 222

Angular 9 won't display image

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

Upvotes: 2

Views: 798

Answers (1)

Bunyamin Coskuner
Bunyamin Coskuner

Reputation: 8859

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

Upvotes: 3

Related Questions