我有多个图像保存在我的数据库中，我使用for循环在我的HTML页面中获取它们，获取这些图像后我想要的是将它们显示在不同的div中，它们应该显示在“cropit-preview-image”，这是我的代码：
<html>
<head>
<meta content="True" name="HandheldFriendly">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="viewport" content="width=device-width">
<title>Cermati Banner and Slider</title>
<link rel="stylesheet" href="css/cermati.css">
</head>
<script src="js/cermati.js"></script>
<body class="body">
<header class="navbar">
<!-- <div><span style="vertical-align: middle; padding:0px;">Mau voucher diskon belanja up to 70%?</span></div> -->
<span style="vertical-align: middle; padding:6px;">Mau voucher diskon belanja up to 70%?</span>
<div class="emailInputHolder">
<form action="" class="emailForm">
<input type="text" id="emailText" placeholder="Masukkan email kamu"/>
<button id="navbarButton">DAFTAR</button>
</form>
</div>
</header>
<div id="container">
<div class="row">
<div class="col-xs-12 col-sm-9 col-md-9">
<button id="readMore">Baca Lebih Banyak <span>></span></button>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-9">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<img src="images/hijab01.jpg"/>
</div>
</div>
</div>
<div class="box">
<div id="content">
<h1 id="header" style="">Belanja Gak Pake Pusing!</h1>
<button class="minimizeSlider" onclick="minimize()">❌</button>
<p>Yuk daftarin emailmu untuk melihat pilihan barang-barang fashion MURAH dan TERKINI dari ribuan toko online terpercaya langsung ke email kamu</p>
<form id="boxForm">
<p><input id="boxTextEmail" type="text" placeholder="Masukkan email kamu disini"/></p>
<p><button id="boxButtonEmail">DAFTARKAN SEKARANG</button></p>
</form>
<span>powered by SumoMe</span>
</div>
</div>
</div>
<div id="footer">
</div>
</body>
</html>
答案 0 :(得分：2)
您必须在for循环中使用image标记编写完整的div结构，如下所示
@foreach($Images AS $image)
<div class="col-lg-6 col-xs-12 image-editor text-center">
<div class="cropit-preview" style="position: relative; width: 263px; height: 251px;">
<div class="cropit-preview-image-container" style="position: absolute; overflow: hidden; right: 0px; left: auto; top: 0px; width: 100%; height: 100%;">
<img class="cropit-preview-image" id="{{$image['ImageID']}}" src="/uploads/{{$image['ImageLink']}}" style="transform-origin: right top 0px; will-change: transform;">
</div>
</div>
</div>
@endforeach
答案 1 :(得分：1)
@foreach($Images AS $image)
//this code here will be repeated x times where x is equal with number of images that $Images array has
//so if you have two images then all this html inside loop will be printed out 2 times.
<div class="col-lg-6 col-xs-12 image-editor text-center">
<div class="cropit-preview" style="position: relative; width: 263px; height: 251px;">
<div class="cropit-preview-image-container" style="position: absolute; overflow: hidden; right: 0px; left: auto; top: 0px; width: 100%; height: 100%;">
<img class="cropit-preview-image" id="{{$image['ImageID']}}" src="/uploads/{{$image['ImageLink']}}" style="transform-origin: right top 0px; will-change: transform;">
</div>
</div>
</div>
@endforeach
这里有一个很好的参考link，您可以在其中了解有关循环如何在php中工作的更多信息。
看起来你正在使用laravel。如果是这样，我建议您使用@forelse，以便在没有任何图像时轻松处理。
@forelse ($Images AS $image)
//this code here will be repeated x times where x is equal with number of images that $Images array has
//so if you have two images then all this html inside loop will be printed out 2 times.
<div class="col-lg-6 col-xs-12 image-editor text-center">
<div class="cropit-preview" style="position: relative; width: 263px; height: 251px;">
<div class="cropit-preview-image-container" style="position: absolute; overflow: hidden; right: 0px; left: auto; top: 0px; width: 100%; height: 100%;">
<img class="cropit-preview-image" id="{{$image['ImageID']}}" src="/uploads/{{$image['ImageLink']}}" style="transform-origin: right top 0px; will-change: transform;">
</div>
</div>
</div>
@empty
<p>No images</p>
@endforelse