I have a project where users have their profile and values are coming from API.I am using Django as a language. So when I add my profile photo it is working fine with the current code.And when I go to edit page of the same user it display my current image and when I again hit the save button it detect no image.

my html with api value in src:-

<div class="main-img-preview margin_bottom10">                              
    <img class="thumbnails img-preview" src="{% if result_data_for_editing.profileImage.mediaPath != None %}{{ result_data_for_editing.profileImage.mediaPath }}{% else %}{{ '../assets/images/default-user-image.png' }}{% endif %}"
                                             title="Preview Logo" accept="image/*" >
</div>
<div class="input-group">
    <div class="input-group-btn">
        <div class="fileUpload btn btn_teal btn_raised text-uppercase fake-shadow">
            <span>Browse</span>
            <input id="logo-id" name="media" type="file"
                   class="attachment_upload" required="">
        </div>
    </div>
</div>

my script is this:-

$(document).ready(function () {
    var brand = document.getElementById('logo-id');
    brand.className = 'attachment_upload';
    brand.onchange = function () {
        document.getElementById('fakeUploadLogo').value = this.value.substring();
    };
    function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                $('.img-preview').attr('src', e.target.result);
            };
            reader.readAsDataURL(input.files[0]);
        }
    }

    $("#logo-id").change(function () {
        readURL(this);
    });
});

How can I detect the image from API into my input field. Please ignore grammatical mistakes if their are any. Thanks in advance