Hello everyone, I created a news which is in carousel form. When I upload three images my page wont responded anymore like the page was frozen...

What is the proper way to load image in a bootstrap carousel?

This is my implementation.

My controller.

 public function postNews($id){
        News::whereid($id)->update([
            'post_status' => 1
        ]);
    }

    public function unpostNews($id){
        News::whereid($id)->update([
            'post_status' => 0
        ]);
    }

Note: That controller is my trigger to load only posted status

and here is where I pass the data from my News Controller to welcome.blade.php

Route::get('/', function () {

    //Get news update
    $data = DB::table('news')
            ->where('post_status', 1)
            ->get();
    // dd($data);
    return view('welcome')
            ->with('data', $data);
});

and here is my carousel

<!--Carourel-->
                        <div class="bd-example">
                            <div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
                                @foreach($data as $value)
                                <ol class="carousel-indicators">
                                <li data-target=".carouselExampleCaptions" data-slide-to="0" class="active"></li>
                                </ol>
                                <div class="carousel-inner">
                                    <div class="carousel-item active">
                                        <img src="{{ is_null($value->file_name) ? asset('news_images/image.jpg') : asset('news_images/'.$value->file_name) }}" class="d-block w-100" alt="..." height="300" width="350">
                                        <div class="carousel-caption d-none d-md-block">
                                        <h5>{{$value->title}}</h5>
                                        <p>{{$value->description}}</p>
                                        </div>
                                    </div>
                                    @endforeach
                                </div>
                                <a class="carousel-control-prev" href=".carouselExampleCaptions" role="button" data-slide="prev">
                                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                <span class="sr-only">Previous</span>
                                </a>
                                <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
                                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                <span class="sr-only">Next</span>
                                </a>
                            </div>
                        </div>
                        <!--Carousel-->

So what would be the proper way to fetch and display data into carousel from database?