在for循環中顯示特定div中的圖像

我有多個圖像正在保存在我的數據庫中，我使用for循環在我的HTML頁面中獲取它們，我想在獲取這些圖像後顯示它們不同的div，他們應該在「cropit預覽圖像」中顯示，這裏是我的代碼：在for循環中顯示特定div中的圖像

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

來源

2017-07-14 jessica

你想要實際產生的HTML是什麼？當你把你想要的HTML放入你的循環時會發生什麼？ – David

@David for循環將數據庫中的圖像隨機顯示在我的頁面中，我希望它們能夠顯示在特定位置 – jessica

只需獲取「cropit-preview-image」html並將其放入循環內，它就是那很簡單 –

@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

來源

2017-07-14 13:17:14

你必須寫你的循環內完成股利結構，與圖片標籤，如下

@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

來源

2017-07-14 13:10:58 Puneet

在for循環中顯示特定div中的圖像

回答

相關問題