forループから特定のdivに画像を表示する

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 

ここでは、参考文献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 

Answer 2

あなたがして、ループのためにあなたの内部の完全な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