Show "No image" image if the product does not have images

Author: thecodeholic

public/img/noimage.png

@@ -8,7 +8,7 @@
  $products->map(fn($product) => [
  'id' => $product->id,
  'slug' => $product->slug,
- 'image' => $product->image,
+ 'image' => $product->image ?: '/img/noimage.png',
  'title' => $product->title,
  'price' => $product->price,
  'quantity' => $cartItems[$product->id]['quantity'],

resources/views/cart/index.blade.php

@@ -20,7 +20,7 @@ class="grid gap-8 grig-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 p-5"
  x-data="productItem({{ json_encode([
  'id' => $product->id,
  'slug' => $product->slug,
- 'image' => $product->image,
+ 'image' => $product->image ?: '/img/noimage.png',
  'title' => $product->title,
  'price' => $product->price,
  'addToCartUrl' => route('cart.add', $product)
@@ -30,7 +30,7 @@ class="border border-1 border-gray-200 rounded-md hover:border-purple-600 transi
  <a href="{{ route('product.view', $product->slug) }}"
  class="aspect-w-3 aspect-h-2 block overflow-hidden">
  <img
- src="{{ $product->image }}"
+ :src="product.image"
  alt=""
  class="object-cover rounded-lg hover:scale-105 hover:rotate-1 transition-transform"
  />

resources/views/product/index.blade.php

@@ -2,7 +2,7 @@
  <div x-data="productItem({{ json_encode([
  'id' => $product->id,
  'slug' => $product->slug,
- 'image' => $product->image,
+ 'image' => $product->image ?: '/img/noimage.png',
  'title' => $product->title,
  'price' => $product->price,
  'quantity' => $product->quantity,
@@ -12,7 +12,8 @@
  <div class="lg:col-span-3">
  <div
  x-data="{
- images: {{$product->images->map(fn($im) => $im->url)}},
+ images: {{$product->images->count() ?
+ $product->images->map(fn($im) => $im->url) : json_encode(['/img/noimage.png'])}},
  activeImage: null,
  prev() {
  let index = this.images.indexOf(this.activeImage);