为什么延迟加载尚未完成时仍无法显示loading.gif图像？

Question

我正在显示页面列表图像，我正在使用lazyload：

我的laravel刀片html：

   @foreach (explode(';', $listImage) as $info)
     <div>
        <img class="lazy" data-original="{{$info}}"/>               
    </div>
    @endforeach

CSS：

img.lazy {       
        width: 100%;
        min-height: 40px;
    background-image: url(../images/loading.gif);
        background-repeat: no-repeat;
        background-position: 50% 50%;
    }

代码JS：

$("img.lazy").lazyload({
    effect: "fadeIn",
    threshold: 200
});

结果：延迟加载尚未完成时，图像显示为灰色。

延迟加载尚未完成或无法加载时，如何显示/images/loading.gif。

Answer 1

@foreach (explode(';', $listImage) as $info)
    <div>
      <img style=" background-image: url({{ Storage::disk('public')->url('images/'.$info->image) }});" class="lazy" data-original="{{$info}}"/>               
     </div>
@endforeach