how to load image from remote into preview box.txt

---------HTML-----------
<div id="image-preview">
    <label for="image-upload" class="form-label" id="image-label">Choose File</label>
    <input type="file" class="form-control" accept="image/png, image/jpeg" name="image" id="image-upload" />
</div>
------------END HTML---------

---------JS--------------
$.ajax({
        url: "{{asset('assets/images/avtar/3.jpg')}}",
        xhrFields:{
            responseType: 'blob'
        },
        success: function(data){
            var reader = new FileReader();
            // Load file
            reader.addEventListener("load",function(event) {
                var loadedFile = event.target;
                var previewBox = $('#image-preview');
                previewBox.css("background-image", "url("+loadedFile.result+")");
                previewBox.css("background-size", "cover");
                previewBox.css("background-position", "center center");
            });
            reader.readAsDataURL(data);

        }
    });
    
------------------END JS----------

------------------ CSS -----------

<style >
    #image-preview {
        width: 200px;
        height: 200px;
        position: relative;
        overflow: hidden;
        background-color: #ffffff;
        color: #ecf0f1;
    }
    #image-preview input {
        line-height: 200px;
        font-size: 200px;
        position: absolute;
        opacity: 0;
        z-index: 10;
    }
    #image-preview label {
        position: absolute;
        z-index: 5;
        opacity: 0.8;
        cursor: pointer;
        background-color: #bdc3c7;
        width: 200px;
        height: 50px;
        font-size: 20px;
        line-height: 50px;
        text-transform: uppercase;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        text-align: center;
    }
</style>