Delete Image Preview in Laravel Livewire

#1

I would like to know if anyone knows how I can remove the temporary image preview in Laravel Livewire.

I have the following input file:

 @if ($imagenes)

previsualización:

@foreach($imagenes as $img)

    <img class="img-fluid w-25 my-2 contenedor-img" src="{{ $img->temporaryUrl() }}">

 @endforeach

@endif

I need to add a button to delete any of the selected images.

The load is carried out in the following way:

@if ($imagenes)
   <small>previsualización:</small>
   <br>
    @foreach($imagenes as $key => $img)
 
       <img class="img-fluid w-25 my-2 contenedor-img" src="{{ $img->temporaryUrl() }}">
       <button wire:click="eliminarImagen({{ $key }})">
         Delete
       </button>

     @endforeach
   
   @endif
#2

If you are trying to delete a single image it’s easy to do by:

<button wire:click="removeMe">Remove</button>

public function removeMe()
{
  $this->image = '';
}

if You are trying to delete on image in multiple images you can do the following

@foreach($images as $image)
<div wire:key="{{$loop->index}}">
    <button wire:click="removeMe({{$loop->index}})">Remove</button>
</div>
@endforeach

// ...
public $images = [];

public function removeMe($index)
{
        array_splice($this->images, $index, 1);
}

// ...
2 Likes
Old image still showing after delete
#3

Thank you very much, it works perfect. Greetings

#4

You are very welcome mate, happy to help :slight_smile:

1 Like