Show Associated json images of records inside *ngFor in Angular-CodePudding

I'm creating a project in Angular as front-end and Laravel as Backend. I've stored multiple images in laravel storage and the url of images are stored in database as json format like this:

["projects\December2022\ZbgxdJRvkrkaMwErATJE.jpg","projects\December2022\ogyKr0B3ICyqoU5uMhoM.jpg"]

The records are showing but associated images are not showing in angular. Component.ts

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-projects',
  templateUrl: `
  <div *ngFor="let project of data[0]">
            <div >
                        <div >
                            <div >
                                <h3 >{{project.title}}</h3>
                                <p>
                                    {{project.details}}
                                </p>
                            </div>
                        </div>
                    </div>
                    <div >
                        <div >
                            <div >
                             <!-- The images are not showing -->
                                <div  *ngFor="let image of project.images">
                                    <img src="http://localhost:8000/storage/{{image}}" alt="project">
                                </div>
                                
                            </div>
                        </div>
                    </div>
        </div>
`
})
export class ProjectsComponent {
  data:any = [];
  constructor(private http: HttpClient) {
    this.http.get('http://localhost:8000/api/portfolio').subscribe(data => {
      this.data.push(data);
      console.log(this.data);
    },
    error => console.error(error)
    );
  }

}

The Api Controller from Laravel:

Route::get('/portfolio', [ProjectController::class, 'ng_index']);


public function ng_index() {
        $projects = Project::orderBy('id', 'DESC')->get();

        return response()->json($projects);
    }

I'm getting this error for images:

Cannot find a differ supporting object

In Console I'm getting request something like this:

Array(8)
0: {id: 17, title: 'Carpet & Upholstery Cleaning', slug: 'carpet-and-upholstery-cleaning', images: '["projects\\\\December2022\\\\VpBN8B67TmjrgvdviAdw.jpg…rojects\\\\December2022\\\\sjCz7dBTKxTVoamiZbXP.jpg"]', details: 'Refurbishment of upholstery & carpet in a luxury w… state of the upholstery and carpets in the wing.', …}
1: {id: 15, title: 'Hardwood Finishing', slug: 'hardwood-finishing', images: '["projects\\\\December2022\\\\8GGTWcZAgTykEubTawH9.jpg…rojects\\\\December2022\\\\B0JV4G5WYitn66QD5hmU.jpg"]', details: 'Classic hardwood finishing in a residential apartm…ardwood from scratches, stains, and water damage.', …}
2: {id: 14, title: 'Granite & Vinyl Restoration', slug: 'granite-and-vinyl-restoration', images: '["projects\\\\December2022\\\\ISokuJQVFRHWZjBoKGne.jpg…rojects\\\\December2022\\\\nTvOl9J3B3yKiY1uor5f.jpg"]', details: 'Improper sealing had led water to impregnate throu…alt with using chemicals and intensive polishing.', …}
3: {id: 13, title: 'Sandstone Repair', slug: 'sandstone-repair', images: '["projects\\\\December2022\\\\YzScX5wUm3lkhToF8sMz.jpg…rojects\\\\December2022\\\\cPSRGcBI4MpxVVrlgoEA.jpg"]', details: 'In such close proximity to the water fountain, the…o a standard level, removing the signs of damage.', …}
4: {id: 12, title: 'Marble Finishing', slug: 'marble-finishing', images: '["projects\\\\December2022\\\\NG40sMBop9idhv35g6gI.jpg…rojects\\\\December2022\\\\O1k1ZUQkAflca0MMGv7u.jpg"]', details: "A quick polish, and color-enhancing treatment popp…e statues visible on the community's front gates.", …}
5: {id: 11, title: 'Marble & Limestone Restoration', slug: 'marble-and-limestone-restoration', images: '["projects\\\\December2022\\\\ZCoIaf4OTGcpuoyFo4xp.jpg…rojects\\\\December2022\\\\BfYVJbEgrYUYjNdk3qz6.jpg"]', details: 'Severe staining and damage caused by improper tile… then filled with putty to get rid of the cracks.', …}
6: {id: 10, title: 'Marble Re-Grouting, Repairing & Polishing', slug: 'marble-re-grouting-repairing-and-polishing', images: '["projects\\\\December2022\\\\pTy9ULG09ZVdQVPYMe8p.jpg…rojects\\\\December2022\\\\rEroz19LW7hPc3yehdcC.jpg"]', details: 'Original marble surface lacked quality grout. Some… polished the building lobby to a crystal finish.', …}
7: {id: 9, title: 'Vinyl Re-Finishing', slug: 'vinyl-re-finishing', images: '["projects\\\\December2022\\\\ZbgxdJRvkrkaMwErATJE.jpg…rojects\\\\December2022\\\\ogyKr0B3ICyqoU5uMhoM.jpg"]', details: 'Vinyl tiles were long over-due for re-finishing. O…sh according to the specifications of the client.', …}
length: 8

CodePudding user response：

Either you need to send proper image paths from API OR you need to manipulate in the front-end service something like this:

const images = ["projects\\\\December2022\\\\ZCoIaf4OTGcpuoyFo4xp.jpg", "projects\\\\December2022\\\\BfYVJbEgrYUYjNdk3qz6.jpg"];
const newImages = [...images].map(image => image.replaceAll('\\\\', '/'));
console.log("BEFORE >>>", images);
console.log("NOW >>>", newImages);

CodePudding user response：

I've done something like this and it worked for me:

@Component({
  selector: 'app-projects',
  templateUrl: './projects.component.html',
  styleUrls: [`
<swiper  *ngFor="let project of data"
  [pagination]="{
  type: 'progressbar'
  }">
  <ng-template swiperSlide  *ngFor="let image of project.images">
    <img [src]="'http://localhost:8000/storage/' image" alt="">    
  </ng-template>
</swiper>
`]
})
export class ProjectsComponent {
  data:any[] = [];
  constructor(private http: HttpClient) {
  }
  ngOnInit() {
    this.http.get('http://localhost:8000/api/portfolio').subscribe(
      (records: any[0]) => {
        records.forEach((record: any) => {
          record.images = JSON.parse(record.images);
          this.data.push(record);
        });
      },
      error => {
        console.error(error);
      }
    );
  }
}