Full-Stack Vue.js 2 and Laravel 5

Image links
The payload for each listing in the web service should include links to these new
images so a client app knows where to find them. Let's add the image paths to
our listing API payload so it looks like this: { "id": 1, "title": "...", "description":
"...", ... "image_1": "http://vuebnb.test/app/image/1/Image_1.jpg", "image_2":
"http://vuebnb.test/app/image/1/Image_2.jpg", "image_3":
"http://vuebnb.test/app/image/1/Image_3.jpg", "image_4":
"http://vuebnb.test/app/image/1/Image_4.jpg" }
The thumbnail image won't be used until later in the project.
To implement this, we'll use our model's toArray method to make an array
representation of the model. We'll then easily be able to add new fields. Each
mock listing has exactly four images, numbered 1 to 4, so we can use a for loop
and the asset helper to generate fully-qualified URLs to files in the public folder.
We finish by creating an instance of the Response class by calling the response
helper. We use the json; method and pass in our array of fields, returning the
result.
app/Http/Controllers/ListingController.php: public function get_listing_api(Listing
$listing) { $model = $listing->toArray(); for($i = 1; $i id . '/Image_' . $i . '.jpg'
); } return response()->json($model); }
The /api/listing/{listing} endpoint is now ready for consumption by a client app.