从for循环显示特定div中的图像 [英] Displaying images in specific divs from for loop

问题描述

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

@ 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-previewstyle =position：relative; width：263px; height：251px ;>< div class =cropit-preview-image-containerstyle =position：absolute; overflow：hidden; right：0px; left：auto; top：0px; width：100％; height：100％ ;>< img class =cropit-preview-imagealt =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-previewstyle =position：relative; width：263px ; height：251px;>< div class =cropit-preview-image-containerstyle =position：absolute; overflow：hidden; right：0px; left：auto; top：0px; width：100％; height：100％;>< img class =cropit-preview-imagealt =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-previewstyle =position：relative;宽度：263px; height：251px;>< div class =cropit-preview-image-containerstyle =position：absolute;溢出：隐藏; right：0px; left：auto; top：0px;宽度：100％; height：100％;>< img class =cropit-preview-imagealt =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-previewstyle =position：relative;宽度：263px; height：251px;>< div class =cropit-preview-image-containerstyle =position：absolute;溢出：隐藏; right：0px; left：auto; top：0px;宽度：100％; height：100％;>< img class =cropit-preview-imagealt =style =transform-origin：right top 0px; will-change：transform;>< / div>< / div>< / div>

解决方案

  @foreach（$ Images AS $ image）
 
 // this这里的代码会重复x次，其中x等于图像的数量$ Images数组有
 //所以如果你有两个图像，那么所有这个html内循环将被打印出2次
 
< div class =col-lg-6 col-xs-12 image-editor text-center> 
< div class =cropit-previewstyle =position：relative;宽度：263px; height：251px;> 
< div class =cropit-preview-image-containerstyle =position：absolute;溢出：隐藏; right：0px; left：auto; top：0px;宽度：100％; height：100％;> 
< img class =cropit-preview-imageid ={{$ image ['ImageID']}}src =/ uploads / {{ 'ImageLink']}}style =transform-origin：right top 0px; will-change：transform;> 
< / div> 
< / div> 
< / div> 
 
 @endforeach 
  

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

另外它看起来像你正在使用laravel。如果是这样，我建议你使用 @forelse ，这样当你没有任何图像时可以轻松处理它。

  @forelse（$ Images AS $ image）
 
 //这里的代码会重复x次，其中x等于图片的数量$ Images数组有
 //所以如果你有两个图像，那么所有这个html内循环将被打印出来2次
 
< div class =col-lg-6 col-xs- 12图像编辑器文本中心> 
< div class =cropit-previewstyle =position：relative;宽度：263px; height：251px;> 
< div class =cropit-preview-image-containerstyle =position：absolute;溢出：隐藏; right：0px; left：auto; top：0px;宽度：100％; height：100％;> 
< img class =cropit-preview-imageid ={{$ image ['ImageID']}}src =/ uploads / {{ 'ImageLink']}}style =transform-origin：right top 0px; will-change：transform;> 
< / div> 
< / div> 
< / div> 
 @empty 
 
 < p>没有图片< / p> 
 
 @endforelse 
  

I have multiple images that are being saved in my database, and I'm getting them in my HTML page using a for loop, what I want after getting those images is to display them in different divs, they should be displayed in the "cropit-preview-image", here is my code:

@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>

解决方案

@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

Here you have a good reference link where you can learn more about how loops work in php.

Also it looks like you are using laravel. If so i would suggest you to use @forelse so you can easily handle it when you don't have any image.

@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

这篇关于从for循环显示特定div中的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！