使用 Laravel 从数据库中获取随机图像

Question

我有一个充满图像的数据库。我想在我的视图中显示 4 张图像并将它们设置为随机，以便在每次刷新时显示新图像。

这通常很基本，但我需要为每个图像使用不同的类名，这让我很反感。

这是我的控制器：

$randpics = Pic::inRandomOrder()
->where('status', 'Active')
->limit(4)
->get();

return view('page.index',compact('randpics'));

这是我的观点：（这给了我相同的随机图像，4 次）我希望 PHP 逻辑循环 4 次给我 4 个不同的图像，但事实并非如此。

我什至尝试用 4 个不同的变量名编写 4 个不同的时间，但仍然只能得到 4 个相同的图像。

   @foreach($randpics as $randpic)
    @php
      $cin = $randpic->cin ;
      $mi = $randpic->my_img;
      $rand = (asset("storage/images/cdp/$cin/profile-img/$mi"));
    @endphp
   @endforeach

 <div class="pic-grid">
   <div class="box-a" style="background-image: url({{ $rand }}"></div>
   <div class="box-b" style="background-image: url({{ $rand }}"></div>
   <div class="box-c" style="background-image: url({{ $rand }}"></div>
   <div class="box-d" style="background-image: url({{ $rand }}"></div>
 </div>

我意识到要正确执行此操作，在我看来应该是这样的......

 @foreach($randpics as $randpic)
   <div class="box-a" style="background-image:url({{ asset("storage/images/cdp/$randpic->cin/profile-img/$randpic->my_img") }}")>
   </div>
 @endforeach

但由于有 4 个不同的类，除非我能以某种方式为 4 个输出图像中的每一个添加不同的类，否则该循环将不起作用。 (box-a, box-b, box-c & box-d)

任何帮助将不胜感激。

Answer 1

首先，你需要在你的foreach循环中输出<div>s

@foreach($randpics as $randpic)
@php
  $cin = $randpic->cin ;
  $mi = $randpic->my_img;
  $rand = (asset("storage/images/cdp/$cin/profile-img/$mi"));
@endphp
<div ...>
@endforeach

接下来，要处理分配不同的类，您可以将 4 个类传递到一个数组中，并在循环中引用它们：

$classes = ["box-a", "box-b", "box-c", "box-d"];
return view('page.index',compact('randpics', 'classes'));

@foreach($randpics as $index => $randpic)
...
<div class="{{ $classes[$index] }}"...>
@endforeach

所以，把它们放在一起：

Controller.php：

$randpics = Pic::inRandomOrder()
->where('status', 'Active')
->limit(4)
->get();

$classes = ["box-a", "box-b", "box-c", "box-d"];

return view('page.index',compact('randpics', 'classes'));

查看.blade.php：

<div class="pic-grid">
  @foreach($randpics as $index => $randpic)
  @php
  $cin = $randpic->cin ;
  $mi = $randpic->my_img;
  $rand = (asset("storage/images/cdp/$cin/profile-img/$mi"));
  @endphp
  <div class="{{ $classes[$index] }}" style="background-image: url({{ $rand }}"></div>
  @endforeach
</div>