Laravel - несколько изображений взрываются / взрываются

Question

У меня есть проект с несколькими изображениями, и все работает нормально. Все, что я хочу, это иметь только одно изображение в products.blade.php и все изображения в productshow.blade.php. Итак, это мое ProductsController:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Product;

class ProductsController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        $products = Product::all();
        return view('products')->with('products', $products);
    }

    /**
     * Show the form for creating a new resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function create()
    {
        return view('createprod');
    }

    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        $input=$request->all();
        $images=array();
        if($files=$request->file('images')){
            foreach($files as $file){
                $name=$file->getClientOriginalName();
                $file->move('storage/image',$name);
                $images[]=$name;
            }
        }
        /*Insert your data*/

        Product::insert( [
            'images'=>  implode("|",$images),
            'title' =>$input['title'],
            //you can put other insertion here
        ]);

        return redirect('/products');
    }

    /**
     * Display the specified resource.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function show($id)
    {
        $product = Product::find($id);
        return view('productshow')->with('product', $product);
    }

    /**
     * Show the form for editing the specified resource.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function edit($id)
    {
        //
    }

    /**
     * Update the specified resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function update(Request $request, $id)
    {
        //
    }

    /**
     * Remove the specified resource from storage.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function destroy($id)
    {
        //
    }
}

И это мое products.blade.php:

@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">All products
                    <a href="/products/create" class="btn btn-primary" style="margin-left: 70%">New product +</a></div>
                <hr>
                <div class="card-body">
                    @foreach($products as $product)
                        <h2>{{$product->title}}</h2>

                        @foreach (explode('|', $product->images) as $image)
                            <br>                          
                            <a class="image-popup-vertical-fit" href="/storage/image/{{$image}}">
                                <img src="/storage/image/{{$image}}" style="width:100%">
                            </a>
                        @endforeach
                        <br>
                        <hr style="border: 1.5px solid grey">
                    @endforeach
                    <small><?php echo now() ?></small>

                </div>
            </div>
        </div>
    </div>
</div>
@endsection

Так что в моих products.blade.php все изображения отображаются (взрываются), но я только нужно показать одно изображение, например первое изображение. Как я могу это сделать? Я не очень хорош в нескольких изображениях. Пожалуйста помоги! Спасибо!

Answer 1

Как вы сказали, вы просто хотите отобразить первое изображение из набора.

В вашем products.blade.php вместо @foreach используйте -

@php $img = explode('|', $product->images); @endphp

Удалить -

@foreach (explode('|', $product->images) as $image)
<br>                          
 <a class="image-popup-vertical-fit" href="/storage/image/{{$image}}">
  <img src="/storage/image/{{$image}}" style="width:100%">
 </a>
@endforeach

И добавить

 <img src="/storage/image/{{$img[0]}}" style="width:100%">

Answer 2

{{ explode('|', $product->images)[0] }}

Однако я бы порекомендовал взглянуть на отношения ORM HasMany Laravel, когда у вас есть время.

Answer 3

Похоже, вы сохраняете несколько изображений в одном столбце? Это не очень хороший подход. создайте новую модель изображений продуктов с внешним видом продукта, сохраните изображения и используйте Отношения .

** На данный момент ** вы можете сделать это

@foreach($products as $product)
    <h2>{{$product->title}}</h2>
   <?php 
       $allImages=explode('|', $product->images) 
      ?>
    <br>                          
   <a class="image-popup-vertical-fit" href="/storage/image/{{$allImages[0]->images}}">
        <img src="/storage/image/{{$allImages[0]->images}}" style="width:100%">
     </a>
    <br>
    <hr style="border: 1.5px solid grey">
@endforeach

после преобразования в массив получить первый индекс [0] массива вместо его зацикливания.