Laravel - Backpack multi images showing on front-end

Question

I'm using Backpack for my Laravel project. And this is my code for image upload: My ImageCrudController :

public function setup()
    {
        /*
        |--------------------------------------------------------------------------
        | CrudPanel Basic Information
        |--------------------------------------------------------------------------
        */
        $this->crud->setModel('App\Models\Image');
        $this->crud->setRoute(config('backpack.base.route_prefix') . '/image');
        $this->crud->setEntityNameStrings('image', 'images');

        $this->crud->setColumns(['images']);
        $this->crud->addField([
            'name' => 'images',
            'label' => 'Images',
            'type' => 'upload_multiple',
            'upload' => true,
            //s'disk' => 'uploads' // if you store files in the /public folder, please ommit this; if you store them in /storage or S3, please specify it;
        ]);

        /*
        |--------------------------------------------------------------------------
        | CrudPanel Configuration
        |--------------------------------------------------------------------------
        */

        // TODO: remove setFromDb() and manually define Fields and Columns
        //$this->crud->setFromDb();

        // add asterisk for fields that are required in ImageRequest
        $this->crud->setRequiredFields(StoreRequest::class, 'create');
        $this->crud->setRequiredFields(UpdateRequest::class, 'edit');
    }

And this is my App\Models\Image model:

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Model;
use Backpack\CRUD\CrudTrait;

class Image extends Model
{
    use CrudTrait;

    /*
    |--------------------------------------------------------------------------
    | GLOBAL VARIABLES
    |--------------------------------------------------------------------------
    */

    protected $table = 'images';
    protected $primaryKey = 'id';
    // public $timestamps = false;
    // protected $guarded = ['id'];
    protected $fillable = ['images'];
    // protected $hidden = [];
    // protected $dates = [];

    /*
    |--------------------------------------------------------------------------
    | FUNCTIONS
    |--------------------------------------------------------------------------
    */

    public function setImagesAttribute($value)
    {
        $attribute_name = "images";
        $disk = config('backpack.base.root_disk_name');;
        $destination_path = "public/uploads";

        $this->uploadMultipleFilesToDisk($value, $attribute_name, $disk, $destination_path);

    // return $this->{$attribute_name}; // uncomment if this is a translatable field
    }

    protected $casts = [
        'images' => 'array'
    ];

}

Now I'm trying to show those images on my front-end.Just to show all images for that post or to show [0] image from array.Here is my code for that:

@foreach($images as $image)
   @foreach (json_decode($image->images) as $photo)
      <img src="uploads/{{$photo}}" style="width:50%" />
   @endforeach
@endforeach

but it is showing me this error:

json_decode() expects parameter 1 to be string, array given

What I'm doing wrong?

Answer 1

I'm not sure but I think that you don't need to use json_decode the images attribtue from your model is already casted to array.

So you can try to loop $image->images because it is already an array

Answer 2

2 things:

1- you don't need need to json_decode() 2- I think (based on what you provided) that you should replace

@foreach($images as $image)
   @foreach (json_decode($image->images) as $photo)
      <img src="uploads/{{$photo}}" style="width:50%" />
   @endforeach
@endforeach

with

@foreach($images as $image)
  <img src="uploads/{{$image}}" style="width:50%" />
@endforeach