how to display multiple images on laravel view

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 AppHttpControllers;

use IlluminateHttpRequest;
use AppListing;
use AppListingImage;

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


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

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

    /*
     * Store a newly created resource in storage.
     *
     * @param  IlluminateHttpRequest  $request
     * @return IlluminateHttpResponse
     */
    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

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) }}

Advertisement

Answer