jquery - 如何在 Laravel 的滑块中显示图像?
问题描述
我有一些图像存储在数据库中,我想在滑块视图中显示这些图像,但是图像和以随机格式出现,它们不是一个一个出现在滑块中,请帮助我,我如何在其中显示所有图像滑块...
这是我显示图像的代码...
<div id="carousel-thumb" class="carousel slide carousel-fade carousel-thumbnails list-gallery pt-2" data-ride="carousel">
<!--Slides-->
@forelse($prop->proImage as $sliderimage)
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block w-100" src="{{asset('property_img/'. $sliderimage->large_thumb_url.'/'. $sliderimage->large_thumb)}}" alt="slide">
</div>
</div>
@empty
@endforelse
<!--Controls starts-->
<a class="carousel-control-prev" href="#carousel-thumb" role="button" data-slide="prev">
<span class="lnr lnr-arrow-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carousel-thumb" role="button" data-slide="next">
<span class="lnr lnr-arrow-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
<!--Controls ends-->
<ol class="carousel-indicators list-gallery-thumb">
<li data-target="#carousel-thumb" data-slide-to="0"><img class="img-fluid d-block w-100" src="{{asset('images/fp-1.jpg')}}" alt="..."></li>
<li data-target="#carousel-thumb" data-slide-to="1" class=""><img class="img-fluid d-block w-100" src="{{asset('images/fp-1.jpg')}}" alt="..."></li>
<li data-target="#carousel-thumb" data-slide-to="2" class=""><img class="img-fluid d-block w-100" src="{{asset('images/fp-1.jpg')}}" alt="..."></li>
<li data-target="#carousel-thumb" data-slide-to="3" class=""><img class="img-fluid d-block w-100" src="{{asset('images/fp-1.jpg')}}" alt="..."></li>
<li data-target="#carousel-thumb" data-slide-to="4" class=""><img class="img-fluid d-block w-100" src="{{asset('images/fp-1.jpg')}}" alt="..."></li>
<li data-target="#carousel-thumb" data-slide-to="5" class=""><img class="img-fluid d-block w-100" src="{{asset('images/fp-1.jpg')}}" alt="..."></li>
<li data-target="#carousel-thumb" data-slide-to="6" class="active"><img class="img-fluid d-block w-100" src="{{asset('images/fp-1.jpg')}}" alt="..."></li>
<li data-target="#carousel-thumb" data-slide-to="7"><img class="img-fluid d-block w-100" src="{{asset('images/fp-1.jpg')}}" alt="..."></li>
</ol>
</div>
解决方案
<!--Slides-->
@foreach($resultSet as $record)
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block w-100" src="{{asset('property_img/'. $record->large_thumb_url.'/'. $records->large_thumb)}}" alt="slide">
</div>
</div>
@endforeach
<!--Controls starts-->
<a class="carousel-control-prev" href="#carousel-thumb" role="button" data-slide="prev">
<span class="lnr lnr-arrow-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carousel-thumb" role="button" data-slide="next">
<span class="lnr lnr-arrow-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
<!--Controls ends-->
<ol class="carousel-indicators list-gallery-thumb">
@foreach($resultSet as $record)
<li data-target="#carousel-thumb" data-slide-to="{{ record->id }}" class=""><img class="img-fluid d-block w-100" src="{{asset('images/fp-1.jpg')}}" alt="..."></li>
@endforeach;
</ol>
推荐阅读
- swiftui-list - SwiftUI 列表在 @ObservedObject 更新时冻结
- git - 代码被两天前提交到 github 的旧代码覆盖。我应该怎么做才能获得本地代码?
- iis - IIS 处理同一网站内多个应用程序的 url 请求
- r - 使用 source() 函数在 Linux 中导出/打印 R 图
- amazon-web-services - AWS CLI S3 桶到桶复制?
- armeria - 如何为 armeria grpc 服务器启用 keep_alive 设置?
- oracle - 如何解决 Oracle SQL 中的错误 12505?
- android - 在底部导航的片段之间切换时片段重置
- vue.js - VueJS:即使我希望它在每次重新渲染时都覆盖它的值,直接改变一个道具真的很糟糕吗?
- java - 线程“主”java.util.NoSuchElementException codechef 中的异常