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

Author: Jenis0619

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