Tengo un método para cargar imágenes en Flask en JavaScript. A continuación se muestra el código utilizado para cargar imágenes y mostrar texto en el chatbot. Esto se usa en mi clase de Chatbox al hacer clic en el botón:

Para el texto no hay problema, funciona bien. Sin embargo, al cargar una imagen, las imágenes cargadas previamente se eliminan, es decir. la etiqueta img anterior src no está visible en el inspector DOM.

 var i = 1; let formData = new FormData(); formData.append('question', $("#question").val()); formData.append('questionImageFile', $("#question-image")[0].files[0]); let question_id = $("#question").val(); let question_image_file = $("#question-image")[0].files[0]; let msg1; if ($("#question").val() === "" && $("#question-image")[0].files[0] === "") return; else if ($("#question").val() != "") msg1 = { name: "User", message: question_id, timestamp: new Date().toLocaleTimeString() } else { var imgMsg = '<img id="' + i + '"/>' msg1 = { name: "User", message: imgMsg, timestamp: new Date().toLocaleTimeString() } } this.messages.push(msg1); $.ajax({ type: "POST", url: "/chatbot", data: formData, cache: false, processData: false, contentType: false, success: (result) => { let msg2 = { name: "Sam", message: result.response, timestamp: new Date().toLocaleTimeString() }; this.messages.push(msg2); var html = ''; this.messages.slice().reverse().forEach(function(item, index) { if (item.name === "Sam") { $("#question").val() + '</div>' + '<div class="chatbotResponse"><div class="timeBot">' + new Date().toLocaleTimeString() + '</div>' + result.response + '</div>' html += '<div class="messages__item messages__item--visitor">' + '<div class="timeBot">' + item.timestamp + '</div>' + item.message if (item.message.startsWith("Sorry, I")) { html += '<button type="button" class="btn btn-outline-primary" id="feedbackBtn" data-toggle="modal" data-target="#exampleModal">Go to feedback form</button>' } html += '</div>' } else { html += '<div class="messages__item messages__item--operator">' + '<div class="timeUser">' + item.timestamp + '</div>' + item.message + '</div>' } }); const chatmessage = chatbox.querySelector('.chatbox__messages'); chatmessage.innerHTML = html; if (formData.get('questionImageFile')) { console.log(i) var output = document.getElementById(i); output.src = window ? .URL ? .createObjectURL(formData.get('questionImageFile')); i = i + 1; } // $("#question").val() $("#question").val(""); }, error: function(result) { alert('error'); this.updateChatText(chatbox) $("#question").val(""); } });