Search code examples
laravellaravel-livewire

How to remove image lazy loading in laravel livewire


I am new to Livewire. I want to remove lazy loading from images, some time it delays much longer before images are shown. I have attached a picture of what it looks when the view is rendered as the carousel is sliding.enter image description here

Here are my codes

Livewire blade component home.blade.php

<!-- Clients Styling Start -->
    <div wire:ignore class="container clients">
        <h2>Our  Clients</h2>
        <section class="customer-logos">
            <div class="slide"><img data-original="assets2/images/clients/1mc.jpg"></div>
            <div class="slide"><img data-original="assets2/images/clients/2mc.jpg"></div>
            <div class="slide"><img data-original="assets2/images/clients/3mc.jpg"></div>
            <div class="slide"><img data-original="assets2/images/clients/4mc.jpg"></div>
            <div class="slide"><img data-original="assets2/images/clients/5mc.jpg"></div>
            <div class="slide"><img data-original="assets2/images/clients/6mc.jpg"></div>
            <div class="slide"><img data-original="assets2/images/clients/7mc.jpg"></div>
            <div class="slide"><img data-original="assets2/images/clients/8mc.jpg"></div>
            <div class="slide"><img data-original="assets2/images/clients/9mc.jpg"></div>
            <div class="slide"><img data-original="assets2/images/clients/10mc.jpg"></div>
            <div class="slide"><img data-original="assets2/images/clients/11.jpg"></div>
            <div class="slide"><img data-original="assets2/images/clients/12mc.jpg"></div>
            <div class="slide"><img data-original="assets2/images/clients/13mc.jpg"></div>
            <div class="slide"><img data-original="assets2/images/clients/14mc.jpg"></div>
            <div class="slide"><img data-original="assets2/images/clients/15mc.jpg"></div>
            <div class="slide"><img data-original="assets2/images/clients/16mc.jpg"></div>
            <div class="slide"><img data-original="assets2/images/clients/17mc.jpg"></div>
            <div class="slide"><img data-original="assets2/images/clients/18mc.jpg"></div>
            <div class="slide"><img data-original="assets2/images/clients/19mc.jpg"></div>
            <div class="slide"><img data-original="assets2/images/clients/20mc.jpg"></div>
            <div class="slide"><img data-original="assets2/images/clients/21mc.jpg"></div>
            <div class="slide"><img data-original="assets2/images/clients/22mc.jpg"></div>
            <div class="slide"><img data-original="assets2/images/clients/23mc.jpg"></div>
            <div class="slide"><img data-original="assets2/images/clients/24mc.jpg"></div>
            <div class="slide"><img data-original="assets2/images/clients/25mc.jpg"></div>
            <div class="slide"><img data-original="assets2/images/clients/26mc.jpg"></div>
            <div class="slide"><img data-original="assets2/images/clients/27mc.jpg"></div>
            <div class="slide"><img data-original="assets2/images/clients/28mc.jpg"></div>
            <div class="slide"><img data-original="assets2/images/clients/29mc.jpg"></div>
            <div class="slide"><img data-original="assets2/images/clients/30mc.jpg"></div>
            <div class="slide"><img data-original="assets2/images/clients/31mc.jpg"></div>
            <div class="slide"><img data-original="assets2/images/clients/32mc.jpg"></div>
            <div class="slide"><img data-original="assets2/images/clients/33mc.jpg"></div>
        </section>
    </div>

I have removed the wire:ignore but nothing changed. I need help please


Solution

  • Try following instead of 'data-original'

    <div class="slide"><img src="assets2/images/clients/1mc.jpg"></div>