How to display image from json array object using jquery

How to display image from json array object
Apply Image validation
step1: how to store multiple image in json array

 $input = $request->all();

        $imagePaths = [];

        if (!empty($request['image_upload'])) {
            foreach ($request['image_upload'] as $index => $file) {
                $path = time() . '-' . $file->getClientOriginalName();
                $file->move(base_path() . '/storage/app/public/images', $path);
                $imagePaths[] = $path;
            }
        } 
 $sharemytask = DB::connection('payments')
            ->table("sharedatas")
            ->where('id', $taskid)
            ->update([
                'Video_link' => $video,
                'task_title' => $tasktitle,
                'description' => $desc,
                'image_link' => json_encode($imagePaths), // Convert array to JSON before storing in the database
            ]);

output store in table

["1707708513-princes.png","1707708513-rajesh.jpg"]

step2
declare a variable where we want to display

 var imageContainer = $('#product-task .modal-body .row');

step3: before append data clear content

 imageContainer.empty();

step3: apply for loop to display data in a row within col-md-6

["1707708513-princes.png","1707708513-rajesh.jpg"]

    var imageContainer = $('#product-task .modal-body .row');
            imageContainer.empty();
            if (data.image_link !== undefined && data.image_link !== null) 
            {
              var imageLinks = JSON.parse(data.image_link);
    var imageDiv = $('<div class="col-md-6"></div>');
for (var i = 0; i < imageLinks.length; i++) {
    if (imageLinks[i] === undefined || imageLinks[i] === null) {
        // Show default avatar
        imageDiv.append('<img src="{{url("assets/images/users/default.webp")}}" width="150" height="75" alt="">');
    } else {
        imageDiv.append('<img src="/storage/images/' + imageLinks[i] + '" width="150" height="150" alt="">');
    }
    imageContainer.append(imageDiv); 
}
$('#product-task .modal-body').append(imageContainer);
}
else
{
  console.error('data.image_link is undefined or null');
 console.error('data.image_link is undefined or null');
  imageDiv.append('<img src="{{url("assets/images/users/default.webp")}}" width="150" height="75" alt="">');
  imageContainer.append(imageDiv);

}

step4:Open a tab inside popup modal
create 4 tab inside popup modal

 <div id="product-task" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content" style="width: 200%">
            <div class="modal-header bg-light">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <br>
            </div>
            <div class="modal-body">

            <ul class="nav nav-tabs" id="myTabs" role="tablist">
    <li class="nav-item">
        <a class="nav-link active" id="images-tab" data-toggle="tab" href="#images" role="tab" aria-controls="images" aria-selected="true">Images</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="description-tab" data-toggle="tab" href="#description" role="tab" aria-controls="description" aria-selected="false">Description</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="mystatus-tab" data-toggle="tab" href="#mystatus" role="tab" aria-controls="mystatus" aria-selected="false">Status</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="modification-tab" data-toggle="tab" href="#modification" role="tab" aria-controls="modification" aria-selected="false">Modification</a>
    </li>
    <!-- Add more tabs as needed -->
</ul>

<!-- Bootstrap Tab Content -->
<div class="tab-content">
    <!-- Tab Pane for Images -->
    <div class="tab-pane fade show active" id="images" role="tabpanel" aria-labelledby="images-tab">
        <!-- Add the image container here -->
        <div class="row" id="product-task-images-container">
            <!-- Images will be dynamically added here -->
        </div>
    </div>

    <!-- Tab Pane for Description -->
    <div class="tab-pane fade" id="description" role="tabpanel" aria-labelledby="description-tab">



    </div>

    <div class="tab-pane fade" id="mystatus" role="tabpanel" aria-labelledby="mystatus-tab">

    </div>

    <div class="tab-pane fade" id="modification" role="tabpanel" aria-labelledby="modification-tab">
         <span><b>Modification: </b></span>

        <p id="modification"></p>
    </div>

    <!-- Add more tab panes as needed -->
</div>


            </div>
        </div>
    </div>
</div>

Apply Image validation

 var files = $('#image_upload')[0].files;

  if (files.length > 5) {        
        $('#product-task').modal('hide');
        $('#warningimage').text('You can only select up to 5 files.');
        $('#image-data').modal('show');
      }

for (var i = 0; i < files.length; i++) {
        var allowedTypes = ['image/jpeg', 'image/png', 'image/jpg', 'image/gif', 'image/svg+xml'];
        if (allowedTypes.indexOf(files[i].type) === -1 || files.length > 5) {
          $('#product-task').modal('hide');
            $('#warningimage').text('Invalid file type. Please select a valid image file.');
        $('#image-data').modal('show');
        }

    var maxSize = 2048; // Maximum size in kilobytes
        if (files[i].size > maxSize * 1024  || files.length > 5) {
          $('#product-task').modal('hide');
            $('#warningimage').text('File size exceeds the maximum limit of 2MB. Please select a smaller image file and select less than 5 file.');
        $('#image-data').modal('show');
        }