Tengo una cadena HTML (generada por Summernote) que contiene etiquetas de imagen base64. Cargo los elementos de la imagen, los convierto en un blob de imágenes, los cargo y recupero la URL de la imagen. Luego, establecí el atributo src de la imagen base64 anterior en la nueva URL de imagen.
Cuando agrego la imagen, el atributo src se actualiza, pero cuando registro image.outerHTML, devuelve el valor base64. ¿Cómo puedo obtener image.outerHTML con la actualización de la URL de la imagen?
Aquí está el código reproducido:
var img_string = "<img src='data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO 9TXL0Y4OHwAAAABJRU5ErkJggg=='/>" var image = $(img_string); var arr, blob, bstr, filename, mime, n, u8arr, url; url = image.attr('src'); filename = image.attr('data-filename'); arr = url.split(','); mime = arr[0].match(/:(.*?);/)[1]; bstr = atob(arr[1]); n = bstr.length; u8arr = new Uint8Array(n); while (n--) { u8arr[n] = bstr.charCodeAt(n); } blob = new File([u8arr], filename, { type: mime }); // upload blob and get url back var image_url = "https://images.unsplash.com/photo-1612151855475-877969f4a6cc"; //example image.attr('src', image_url); console.log(image); //logs image with updated src console.log(image.prop('outerHTML')); //logs image string with base64 src <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>Tal vez el problema que está teniendo es que está cargando la imagen que se realiza de forma asíncrona, y el registro de la consola se activa antes de que finalice la carga y la obtención de la URL. Por lo tanto, puede intentar esperar a que la imagen se cargue completamente usando promesas o la devolución de llamada exitosa si está usando jQuery.ajax y realice la tarea solo después de que la imagen se haya cargado por completo.