Image not getting displayed in Laravel Ajax Crud

Question

I am trying to display the uploaded image on the index.blade but it is not getting displayed though the file path in the <img> tag is correct and also I checked on the console and it is also getting the correct path. Controller for image store:

if($request->hasFile('profilepic')){
            $file = $request->file('profilepic');
            $profilepic=$file->getClientOriginalName();
            $file->storeAs('public/profile', $profilepic);
            $detail['profilepic'] = $profilepic;
        }

        if($request->hasFile('signature')){
            $file1 = $request->file('signature');
            $signature=$file1->getClientOriginalName();
            $file1->storeAs('public/sign', $signature);
            $detail['signature'] = $signature;
        }
        $detail->save();
        return response()->json([
            'status'=> 'success',
            'data' => $detail
        ]);

index.blade for img path

<td><img src="../storage/app/public/profile/{{ $detail->profilepic }}" width="100px"></td>
                <td><img src="storage/app/public/sign/{{ $detail->signature }}" width="100px"></td>

Ajax jquery:

 $(document).on('submit','.create_form',function(event)
            {
                event.preventDefault();
                const fd = new FormData(this);
                $.ajax({
                    url: "{{ route('details.store') }}",
                    data: fd,
                    type: "POST",
                    dataType: "json",
                    contentType: false,
                    processData: false,
                    success: function(response)
                    {
                        $(".div3").load("{{ route('details.index') }}");
                    },
                    error: function(error)
                    {
                        console.log("Errors :",error);
                    }
                });
            });

Also tried to put the APP URL from .env file in the <img src> but not working.

Answer 1

I listed below some things you can try to validate/troubleshoot your problem.

1. Ensure that the images are being stored correctly in the specified storage directory. Check the public/profile and public/sign directories to confirm that the images are saved there.

2. In Laravel, the files stored in the storage/app/public directory are not directly accessible. You need to create a symbolic link to make them accessible from the web. Run the following command in your terminal to create the symbolic link:

   php artisan storage:link
   

   This command will create a symbolic link from public/storage to storage/app/public. Make sure the symbolic link is created successfully.

3. Update the image source paths in your index.blade file to use the correct URL. Instead of using relative paths, use the asset() helper function to generate the correct URL based on the symbolic link:

   <td><img src="{{ asset('storage/profile/' . $detail->profilepic) }}" width="100px"></td>
   <td><img src="{{ asset('storage/sign/' . $detail->signature) }}" width="100px"></td>
   

Let us know about the outcome of the above troubleshooting!