GET request with Angular 17, how to do it?

I'm currently learning Angular CLI, and I would like to fetch an image from my server.I tried following some tutorials but they don't provide much information on what is happening, and most of them are using a file called app.module.ts not available in latest angular versions.

Here is the step-by-step of what I have done so far:

1. Set up an express server that is properly serving the JSON object with all the images' name and path.

2. Set-up a new service to provide the GET request API using the HttpClient library, here what it looks like:

cards.service.ts:

import { Injectable } from '@angular/core';import {HttpClient} from "@angular/common/http";import {Observable} from "rxjs";@Injectable({  providedIn: 'root'})export class CardsService {  constructor(private http: HttpClient) { }  getData(): Observable<any> {    return this.http.get('http://localhost:3000')  }}

3. Set up my cards.component.ts to be able to use the services:

import {Component} from '@angular/core';import {CardsService} from '../services/cards.service'@Component({  selector: 'app-cards',  standalone: true,  imports: [],  templateUrl: './cards.component.html',  styleUrl: './cards.component.css'})export class CardsComponent {  posts:any;  constructor(private service:CardsService) {}  ngOnInit() {    this.service.getData().subscribe(response => {        this.posts = response;      });  }}

I really don't know how to follow-up from here, I would like to use my HTML file now to properly request the imagem from the server.

Here is my cards.component.html:

<div class="cards"><div class="card"><img src="/src/assets/img/card0.png" /></div><div class="card"><img src="/src/assets/img/card1.png" /></div></div>

How do I use the API to get the images from the server and replace the <img src="/src/img/card0.png" /> for a proper GET request from the server?

from the guide I was following, it does the following for html:

<ul class="list-group"><li       *ngFor="let post of posts"      class="list-group-item">      {{ post.title }}</li></ul>

I don't understand where is the API call in the code above to be able to properly use in my project

Edit:

Here are some screenshots of the error:image not loading

server 404 error: (