For my latest project, I am using Angular for the front-end and Laravel for the back-end. The issue I'm facing is with displaying images in Angular that are stored in Laravel storage. The image URLs are stored in the database in JSON format like this:
["projects\December2022\ZbgxdJRvkrkaMwErATJE.jpg","projects\December2022\ogyKr0B3ICyqoU5uMhoM.jpg"]
The data records are being displayed correctly but the associated images are not showing up in Angular.
This is a snippet of my component.ts file:
import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-projects',
templateUrl: `
<div *ngFor="let project of data[0]">
<div class="col-xl-6 col-12">
<div class="single-project-info">
<div class="item-content">
<h3 class="item-title">{{project.title}}</h3>
<p>
{{project.details}}
</p>
</div>
</div>
</div>
<div class="col-xl-6 col-12">
<div class="single-project-slider">
<div class="carousel">
<!-- The images are not showing -->
<div class="slide-item" *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)
);
}
}
In my Laravel API controller:
Route::get('/portfolio', [ProjectController::class, 'ng_index']);
public function ng_index() {
$projects = Project::orderBy('id', 'DESC')->get();
return response()->json($projects);
}
The error message I'm receiving for the images is:
Cannot find a differ supporting object
In the console, the request looks something like this:
Array(8)
0: {id: 17, title: 'Carpet & Upholstery Cleaning', slug: 'carpet-and-upholstery-cleaning', images: '["projects\\\\December2022\\\\V…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\\\\8G…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: '[&q…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\\\\Dece…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: '[&…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-res…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-groutin…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\\\\Decem…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