Displaying image from database in grid - laravel - php

Question

I have my image path in my database and now, i am trying to get the image into my html grid. But when i try to fetch the image, i get an error
Property [path] does not exist on this collection instance.
But then, there is path attribute in my table in the database. Has it got to be an error from my models? My model seems right to me. Anyway what am i not doing right here, please?
Thanks for your concern
HTML
<figure>
<div class="snipcart-item block">
<div class="snipcart-thumb">
<img src="{{$product->images->path}}" alt=" " class="img-responsive" />
<p>{{$product->name}}</p>
<h4>GH₵ {{ number_format($product->price,2) }} </h4>
</div>
<div class="snipcart-details top_brand_home_details">
<form action="#" method="post">
<fieldset>
</fieldset>
</form>
</div>
</div>
</figure>
Image
public function products()
{
return $this->belongsTo(Product::class);
}
Product_images
public function images()
{
return $this->hasMany(Image::class);
}

Answer 1

You need to make a foreach as it's give you a collection.
Hence, try to display it like:
#foreach($product->images as $image)
#if($image->path)
<img src="{{ $image->path }}" alt=" " class="img-responsive" />
#else
<p>No image to display!</p>
#endif
#endforeach
Hope this will helps you!

Answer 2

This happens because the Product model hasMany Images.
In order to reach the path property you should do this:
#foreach($product->images as $image)
{{$image->path}}
#endforeach
Or do this in your Product Model and change your database structure
public function image()
{
return $this->hasOne(Image::class);
}
I hope it helps.

Answer 3

If your path does not any issue, the following is the correct way to display an image in Laravel blade template.
<img src="{{URL::asset('directory/name_of_image_file.file_format')}}">

Answer 4

You don't have field path in DB images
You code must be:
<img src="{{$product->images->[you field in Db images]}}" alt=" " class="img-responsive" />

Answer 5

HTML
#foreach($products as $product)
<figure>
<div class="snipcart-item block">
<div class="snipcart-thumb">
<img src="{{$product->images->first()->path}}" alt=" " class="img-responsive" />
<p>{{$product->name}}</p>
<h4>GH₵ {{ number_format($product->price,2) }} </h4>
</div>
<div class="snipcart-details top_brand_home_details">
<form action="#" method="post">
<fieldset>
</fieldset>
</form>
</div>
</div>
</figure>
#endforeach

Answer 6

<a href="{{ route('product.view', $product->slug)}}">
<img src="{{$product->images->first()->path}}" alt=" " class="img-responsive" />
</a>
$product->images is a collection, you need to get the image out of the collection. for now I have used the first() which will fetch the first image, you may want to loop through the collection depending on your scenario. You may want to read about an answer have written here