在特定的divs for循环中显示图像

Question

我有多个图像保存在我的数据库中，我使用for循环将它们保存在HTML页面中，在获取这些图像之后，我想要的是将它们显示在不同的div中，它们应该显示在“cropit-预览-图像”中，下面是我的代码：

​

@foreach($Images AS $image)
<img id="{{$image['ImageID']}}" src="/uploads/{{$image['ImageLink']}}">
            @endforeach


<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" alt="" style="transform-origin: right top 0px; will-change: transform;">
</div>
</div>
</div>

<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" alt="" style="transform-origin: right top 0px; will-change: transform;">
</div>
</div>
</div>

<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" alt="" style="transform-origin: right top 0px; will-change: transform;">
</div>
</div>
</div>

<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" alt="" style="transform-origin: right top 0px; will-change: transform;">
</div>
</div>
</div>

​

Answer 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

这里有一个很好的参考链接，您可以在这里了解更多关于循环如何在php中工作的信息。

而且看起来你用的是拉拉。如果是这样的话，我建议您使用@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

Answer 2

您必须在for循环中使用图像标记编写完整的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