Tengo un proyecto donde los usuarios tienen su perfil y los valores provienen de la API. Estoy usando Django como lenguaje. Entonces, cuando agrego mi foto de perfil, funciona bien con el código actual. Y cuando voy a editar la página del mismo usuario, muestra mi imagen actual y cuando presiono nuevamente el botón Guardar, no detecta ninguna imagen.

mi html con valor api en 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>

mi guion es este:-

 $(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); }); });

¿Cómo puedo detectar la imagen de la API en mi campo de entrada? Ignore los errores gramaticales si los hay. Gracias por adelantado