how to display multiple images on laravel view

Question

i need help displaying multiple images on laravel, so far I can upload and save the images to the path public_path().'images/listing/'.$listing->id.'/'.$name;.

but I not sure how to display each individual image path correctly on my blade file and display the saved images

my ListingController

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Listing;
use App\ListingImage;

class ListingController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        $listings = Listing::all();


        return view('listings')->with('listings', $listings);
    }

    /**
     * Show the form for creating a new resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function create()
    {
        return view ('listings.create');
    }

    /*
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        $request->validate([
            'title'=>'required',
            'price'=>'required',
            'address'=>'required',
            'rooms'=>'required',
            'city'=>'required',
            'state'=>'required',
            'area'=>'required',
            'bathrooms'=>'required',
            'description'=>'required',
            'status'=>'required',
            'type'=>'required',
            'images' => 'required',
            'images.*' => 'mimes:png,jpg,jpeg,gif,svg|max:2048'
        ]);

        $listing = new Listing();
        $listing->title = $request->input('title');
        $listing->price = $request->input('price');
        $listing->address = $request->input('address');
        $listing->rooms = $request->input('rooms');
        $listing->city = $request->input('city');
        $listing->state = $request->input('state');
        $listing->zip_code = $request->input('zip_code');
        $listing->area = $request->input('area');
        $listing->building_age = $request->input('building_age');
        $listing->bedrooms = $request->input('bedrooms');
        $listing->bathrooms = $request->input('bathrooms');
        $listing->description = $request->input('description');
        $listing->status = $request->input('status');
        $listing->type = $request->input('type');
        $listing->save();

        foreach ($request->file('images') as $image) {
            $listingImage = new ListingImage;
            $name = $image->getClientOriginalName();
            $path = public_path().'images/listing/'.$listing->id.'/'.$name;
            $image->move($path);
            $listingImage->listing_id = $listing->id;
            $listingImage->image_path = $path;
            $listingImage->save();
        }
        return redirect()->back()->with('success', 'Listing saved!');
    }
}

the listing.blade.php

@foreach($listings as $listing)
                <!-- Listing Item -->
                <div class="listing-item">

                    <a href="single-property-page-1.html" class="listing-img-container">

                        <div class="listing-badges">
                        <span>{{ $listing->status }}</span>
                        </div>

                        <div class="listing-img-content">
                            <span class="listing-price">{{$listing->price}} <i>$520 / sq ft</i></span>
                            <span class="like-icon with-tip" data-tip-content="Add to Bookmarks"></span>
                            <span class="compare-button with-tip" data-tip-content="Add to Compare"></span>
                        </div>


                        <div class="listing-carousel">
                            **@foreach($listing->images as $image)
                            <div><img src="{{ asset('$image->image_path') }}" alt=""></div>
                            @endforeach**
                        </div>
                    </a>

                    <div class="listing-content">

                        <div class="listing-title">
                        <h4><a href="#">{{$listing->title}}</a></h4>
                            <a href="" class="listing-address popup-gmaps">
                                <i class="fa fa-map-marker"></i>
                                {{$listing->address}}
                            </a>

                            <a href="single-property-page-1.html" class="details button border">Details</a>
                        </div>

                        <ul class="listing-details">
                            <li>530 sq ft</li>
                            <li>{{$listing->bedrooms}} Bedroom</li>
                            <li>{{$listing->rooms}} Rooms</li>
                            <li>{{$listing->bathrooms}} Bathroom</li>
                        </ul>
                    </div>

                </div>
                <!-- Listing Item / End -->
                @endforeach

Answer 1

From what I can see public_path() gives your full path to your public folder from the root filesystem. And often in laravel web application development you don't want the full path from the filesystem while rendering the file. You only want it at the time of moving the file so it can point to proper location from the root filesystem. In laravel you want the path from the public folder so.

Use this as a code.

     
    $imageName = time().'.'.$image->getClientOriginalExtension();
    $image->move(public_path('images/listing/'.$listing->id), $imageName);
    $listingImage->listing_id = $listing->id;
    $listingImage->image_path = 'images/listing/'.$listing->id."/".$imageName;
    $listingImage->save();

And then on your view use

{{ asset($image->image_path) }}

Answer 2

Have you tried echo out asset('$image->image_path')?

I guess you have to remove the single quotes here since you want to insert the value of $image->image_path.