I have a products
and product_image
tables. In my product_image
table I have a foreign key: product_id
.
What I want is to get only 1 image of each product in my table the best example here will be e-commerce website in which they have all list of products with only 1 image to show, that's what I'm planning to do with my code.
But the problem in my code is the output of my product lists will depend on how many images they have.
for example:
- product 1 has 2 images
- product 2 has 1 image
- product 3 has 3 images
the output of my code will be
product 1, product 1, product 2, product 3, product 3, product 3
I have this code in laravel
$products = DB::table('products')
->where('product_name','like',escape_like($request->search_product).'%')
->orderBy('product_name','asc')
->join('product_image','products.id','=','product_image.product_id')
->select('products.*','product_image.*')
->paginate($request->total_products);
I have this code in Vue
<div class="col-md-4" v-for="product in products">
<div class="card mt-3">
<img class="card-img-top" :src="product.path" alt="Product Image">
<div class="card-body">
<h5 class="card-title">{{ product.product_name }}</h5>
<div class="card-text">
<p v-if="product.status == 'Sale'" class="old-price float-right"><del>Php. {{ product.price.toFixed(2) }}</del> </p>
<p >Php. {{ product.price.toFixed(2) }}</p>
<div class="text-center">
<a href="#" class="btn btn-primary" title="Edit"><i class="far fa-edit"></i></a>
<a href="#" class="btn btn-danger" title="Delete"><i class="fas fa-trash-alt"></i></a>
</div>
</div>
</div>
</div>
</div>