How to Fetch Images From api and display

[bhaveshdarji386]

Hello,
I am using your component and I am able to upload images into database but the issue is I am not able to display those saved images again into form. Can you please show me the way how to do it. I tried a lot but not succeeded.
I am using laravel for fetching data.

[Zakerxa]

If you are using laravel , Here is an example of the way you should save images.

1.In you product controller or something ...

        //  Random Token
        $string     = 'QWERTYUIOPASDFGHJKLZXCVBNM0123456789';
        $shuffle    = str_shuffle($string);
        $slug       = substr($shuffle, 0, 12) . '-' . rand(10000, 99999);
        $imagepath  = public_path("images/$slug");

        // File Input System
        if (!file_exists($imagepath)) {
            if (!mkdir($imagepath, 0777, true)) die('Failed to create folders...');
            else chmod("$imagepath", 0777);
        } else return response()->json(['response' => 'File not exist.']);

        $images = [];
        if ($request->hasFile('images')) {
            foreach ($request->file('images') as $image) {
                $fileName = $slug . '-'. rand(10000,99999) . $image->getClientOriginalName();
                $image->move($imagepath, $fileName);
                $images[] = $fileName;
            }
        }else return response()->json(['response' => 'error']);

        $inputProduct['photos'] = implode('|',$images);
        $inputProduct['slug'] = $slug;

        Product::create($inputProduct);

The main thing is the way you should save image should be like that $inputProduct['photos'] = implode('|',$images);##

2.In your Product models file,We will change that images to array format

class Product extends Model
{
    use HasFactory;
    protected $guarded = ['id'];

    protected function getPhotosAttribute($value){
        foreach (explode('|',$this->attributes['photos']) as $value) {
          $photo[] = $value;
        }
       return $photo;
    }

}

3.So now,I hope you can able to display those saved images as an array from frontend.You can also fetch with api that images as an array.

[bhaveshdarji386]

Thank you for your response

Yes I am able to save and storing in array and fetching but using what we will able to render from component
<vue-multi-image-upload
@data-image="images"
:max="1"
:data-reset="component"
:options="options"
:image-size="imageSize"
:image-format="formatType"
:alert-timeout="3e3"
:accept="imageType"
:preview="{ h: 200, w: 250 }"
:resize="{ h: 500, w: 500, keepRatio: true }"
/>

this all have I tried to set in images but it;s not able to preview image after getting details.

please help me and show me the way to work out

thanks & regards

[Zakerxa]

This component is not design to re-render old value.You can only show using loop that old images inside

<div>
    @foreach ($images as $image)
     <img src="{{$image}}">
    @endforeach
</div>

I will be upgrade later to be re-render old value images.Thanks for using this component.