Laravel Database Query Builder Отношения

Question

У меня есть таблицы products и product_image.В моей таблице product_image есть внешний ключ: product_id.

Я хочу получить только 1 изображение каждого товара в моей таблице. Лучшим примером здесь будет веб-сайт электронной коммерции, на котором у них есть весь список товаров с одним изображением, это яЯ планирую сделать с моим кодом.

Но проблема в моем коде заключается в том, что вывод моих списков продуктов будет зависеть от того, сколько изображений у них есть.

, например:

• продукт 1 имеет 2 изображения
• продукт 2 имеет 1 изображение
• продукт 3 имеет 3 изображения

результат вывода моего кода будет

продукт 1, продукт 1, продукт 2, продукт 3, продукт 3, продукт 3

У меня есть этот код в 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);

У меня есть этот код в 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>