How do I fix this error GET http://localhost:8000/C:/Users/Dell/AppData/Local/Temp/phpDF8F.tmp 404 (Not Found)

@MohamedTammam

here is my code for displaying the image

<div class="d-flex justify-content-center py-5">

  @include('livewire.modals.places-crud')

  <div class="bg-white officials-profile-table shadow rounded">
    <div class="d-flex justify-content-between p-2 rounded-top officials-header">
      <h3>PLACES</h3>
      <button type="button" wire:loading.class="disabled" class="btn px-4 shadow btn-add" data-bs-toggle="modal" data-bs-target="#addPlace">Add</button>
    </div>
    <div class="d-flex justify-content-between p-2">
      <div class="row g-1 align-items-center">
        <div class="col-auto">
          <label for="entries">Show</label>
        </div>
        <div class="col-2">
          <input id="entries" wire:model="paginate" type="number" class="form-control form-control-sm">
        </div>
        <div class="col-auto">
          <label for="entries">entries</label>
        </div>
      </div>
      <div class="row align-items-center">
        <div class="col-auto">
          <label for="search">Search:</label>
        </div>
        <div class="col-auto">
          <input wire:model="search" id="search" type="text" class="form-control form-control-sm">
        </div>
      </div>
    </div>
    <div class="py-1 px-2">
      <table class="table border rounded table-striped">
        <thead>
          <tr>
            <th class="align-middle text-center">Image</th>
            <th class="align-middle text-center">Name</th>
            <th class="align-middle text-center">Type</th>
            <th class="align-middle text-center">Location</th>
            <th class="align-middle text-center">Action</th>
          </tr>
        </thead>
        <tbody>
          @forelse ($places as $place)
            <tr>
              <td class="align-middle text-center"><img src="{{ asset(str_replace('public', 'storage', $place->display_img)) }}" alt="photo" class="rounded-pill officials-photo"></td>
              <td class="align-middle text-center">{{ $place->name }}</td>
              <td class="align-middle text-center">{{ $place->type }}</td>
              <td class="align-middle text-center">{{ $place->location }}</td>
              <td class="align-middle text-center">
                <div class="mx-auto actions-container">
                  <i class="fa-solid fa-eye mx-1 view-icon" disabled wire:click="view({{ $place }})" data-bs-toggle="modal" data-bs-target="#viewPlace"></i>
                  <i class="fa-solid fa-pen mx-1 edit-icon" wire:click="edit({{ $place }})" data-bs-toggle="modal" data-bs-target="#updatePlace"></i>
                  <i class="fa-solid fa-trash mx-1 delete-icon" wire:click="archiveConfirmation({{ $place }})" data-bs-toggle="modal" data-bs-target="#archivePlace"></i>
                </div>
              </td>
            </tr>
          @empty
            <tr>
              <h4>No Records Found.</h4>
            </tr>
          @endforelse
        </tbody>
      </table>
      {{ $places->links() }}
    </div>
  </div>
</div>

and this is my code for the form

<form wire:submit.prevent="add" id="add-location-form" enctype="multipart/form-data">
  @csrf
  <div wire:ignore.self class="modal fade" id="addPlace" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="addPlaceLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-scrollable">
      <div class="modal-content">
        <div class="modal-header header-bg py-2">
          <h1 class="modal-title fs-5" id="addPlaceLabel">Add Place</h1>
          <span class="material-symbols-outlined modal-close-icon" wire:click="closeModal" data-bs-dismiss="modal" aria-label="Close">
            cancel
          </span>
        </div>
        <div class="modal-body">
          <div class="col p-3">
            <div class="row-auto mb-3">
              <label for="add-display-image" class="form-label">Display Picture</label>
              <input wire:model="display_image" id="add-display-image" type="file" class="form-control form-control-sm w-50" accept="image/*">
              @error('display_image') <span class="error text-danger" style="font-size: 0.8rem">{{ $message }}</span> @enderror
            </div>
            <div class="row-auto mb-3">
              <label for="add-place-name">Name of Place</label>
              <input wire:model.defer="place_name" id="add-place-name" type="text" class="form-control">
              @error('place_name') <span class="error text-danger" style="font-size: 0.8rem">{{ $message }}</span> @enderror
            </div>
            <div class="row-auto mb-3">
              <label for="add-type">Type</label>
              <select  wire:model="type" id="add-type" class="form-select">
                <option value="">Choose one...</option>
                <option value="Mall">Mall</option>
                <option value="Restaurant">Restaurant</option>
                <option value="Store">Store</option>
                <option value="Car Wash">Car Wash</option>
                <option value="Repair Shop">Repair Shop</option>
                <option value="Junk Shop">Junk Shop</option>
                <option value="Pharmacies">Pharmacies</option>
                <option value="Others">Others</option>
              </select>
              @error('type') <span class="error text-danger" style="font-size: 0.8rem">{{ $message }}</span> @enderror
            </div>
            <div class="row-auto mb-3">
              <label for="add-place-description">Description</label>
              <textarea wire:model.defer="place_description" class="form-control" id="add-place-description"></textarea>
              @error('place_description') <span class="error text-danger" style="font-size: 0.8rem">{{ $message }}</span> @enderror
            </div>
            <div class="row-auto mb-3">
              <label for="add-location">Location</label>
              <div class="input-group">
                <input disabled wire:model.defer="location" id="add-location" type="text" class="form-control">
                <span id="location-btn" class="material-symbols-outlined input-group-text" style="cursor: pointer;">location_on</span>
              </div>
              @error('coordinates') <span class="error text-danger" style="font-size: 0.8rem">{{ $message }}</span> @enderror
            </div>
            <div wire:ignore id="map" style="height: 400px"></div>
          </div>
        </div>
        <div class="modal-footer justify-content-center border-0">
          <button type="submit" wire:loading.class="disabled" class="btn btn-warning px-5 rounded-pill">Add</button>
        </div>
      </div>
    </div>
  </div>
</form>

@furukuku Change the following

{{ asset(str_replace('public', 'storage', $place->display_img)) }}

With

{{ Storage::url($place->display_img) }}

@MohamedTammam I still got the same error. I think the error happens in storing temporary uploaded files in livewire, because when I tried implementing a pure laravel using blade template and without using livewire, I am not getting that error.

@furukuku Did you add the following to your Livewire component?

use WithFileUploads;

@MohamedTammam Yes.

Here is my code

namespace App\Http\Livewire\Admin;

use App\Models\Place;
use Livewire\Component;
use Livewire\WithPagination;
use Livewire\WithFileUploads;
use Illuminate\Support\Facades\Storage;

class Places extends Component
{
    use WithFileUploads;

    use WithPagination;

    protected $paginationTheme = 'bootstrap';

    public $display_image, $place_name, $type, $place_description, $location, $lat, $lng, $coordinates;

    public $place_id;

    public $paginate = 5;

    public $search = "";

    protected $listeners = ['convertLocToGeo'];

    protected $messages = [
        'coordinates.required' => 'The location field is required.',
    ];

    public function updatingSearch()
    {
        $this->resetPage();
    }

    public function resetInputs()
    {
        $this->place_id = '';
        $this->display_image = null;
        $this->place_name = '';
        $this->type = '';
        $this->place_description = '';
        $this->lat = '';
        $this->lng = '';
        $this->coordinates = null;
        $this->location = '';
    }

    public function closeModal()
    {
        $this->resetInputs();
        $this->resetErrorBag();
    }

    public function convertLocToGeo($lat, $lng, $coordinates, $address)
    {
        $this->lat = $lat;
        $this->lng = $lng;
        $this->coordinates = $coordinates;
        $this->location = $address;
    }

    public function add()
    {
        $this->validate([
            'display_image' => 'required|image',
            'place_name' => 'required|string',
            'type' => 'required|string|max:15',
            'place_description' => 'required|string',
            'coordinates' => 'required',
        ]);

        $display_img_filename = $this->display_image->store('public/images/profiles/places');

        Place::create([
            'display_img' => $display_img_filename,
            'name' => $this->place_name,
            'type' => $this->type,
            'description' => $this->place_description,
            'location' => $this->location,
            'latitude' => $this->lat,
            'longitude' => $this->lng,
        ]);

        $this->dispatchBrowserEvent('close-modal');

        $this->resetInputs();
        $this->resetErrorBag();
    }

    public function view(Place $place)
    {
        $this->display_image = $place->display_img;
        $this->place_name = $place->name;
        $this->type = $place->type;
        $this->location = $place->location;
        $this->place_description = $place->description;
    }

    public function edit(Place $place)
    {
        $this->place_id = $place->id;
        $this->display_image = $place->display_img;
        $this->place_name = $place->name;
        $this->type = $place->type;
        $this->location = $place->location;
        $this->place_description = $place->description;
        $this->lat = $place->latitude;
        $this->lng = $place->longitude;

        $this->dispatchBrowserEvent('edit-modal', [
            'lat' => $place->latitude,
            'lng' => $place->longitude,
        ]);
    }

    public function update()
    {
        $old_place = Place::find($this->place_id);

        if($this->display_image != $old_place->display_img){
            $this->validate([
                'display_image' => 'required|image',
                'place_name' => 'required|string',
                'type' => 'required|string|max:15',
                'place_description' => 'required|string',
                // 'coordinates' => 'required',
            ]);

            Storage::disk('local')->delete($old_place->display_img);

    
            $display_img_filename = $this->display_image->store('public/images/profiles/places');
    
            $place = Place::find($this->place_id);
            $place->display_img = $display_img_filename;
            $place->name = $this->place_name;
            $place->type = $this->type;
            $place->description = $this->place_description;
            $place->location = $this->location;
            $place->latitude = $this->lat;
            $place->longitude = $this->lng;
            $place->update();
        }else{
            $this->validate([
                'place_name' => 'required|string',
                'type' => 'required|string|max:15',
                'place_description' => 'required|string',
            ]);

            $place = Place::find($this->place_id);
            $place->name = $this->place_name;
            $place->type = $this->type;
            $place->description = $this->place_description;
            $place->location = $this->location;
            $place->latitude = $this->lat;
            $place->longitude = $this->lng;
            $place->update();
        }
        
        $this->dispatchBrowserEvent('close-modal');

        $this->resetInputs();
        $this->resetErrorBag();
    }

    public function archiveConfirmation(Place $place)
    {
        $this->place_id = $place->id;
    }

    public function archive()
    {
        Place::find($this->place_id)->delete();

        $this->dispatchBrowserEvent('close-modal');
        $this->resetInputs();
    }

    public function render()
    {
        $places = Place::where('name', 'like', '%' . $this->search . '%')
        ->orWhere('type', 'like', '%' . $this->search . '%')
        ->orWhere('description', 'like', '%' . $this->search . '%')
        ->orWhere('location', 'like', '%' . $this->search . '%')
        ->orderBy('created_at', 'desc')
        ->paginate($this->paginate);

        return view('livewire.admin.places', ['places' => $places]);
    }
}