Para mostrar imágenes que requieren autenticación por token, no es posible usar directamente el atributo src en etiquetas HTML. En su lugar, se debe obtener el contenido binario mediante una solicitud autenticada y convertirlo en una URL blob para su visualización.

Implementación de solicitud autenticada

Esta función recupera el flujo de bytes de una imagen autenticada y lo asigna al elemento de imagen correspondiente:

/**
 * Carga una imagen mediante solicitud autenticada y la asigna a un elemento del DOM.
 * @param {string} idElemento - Identificador del elemento img en el DOM.
 */
export const cargarImagenAutenticada = (idElemento) => {
  const elemento = document.getElementById(idElemento || 'imagen');
  const urlConAuth = elemento.getAttribute('data-url-autenticada');
  
  const peticion = new XMLHttpRequest();
  peticion.responseType = 'blob';
  peticion.open('GET', urlConAuth, true);
  peticion.setRequestHeader('X-Auth-Token', localStorage.getItem('token_acceso'));
  
  peticion.addEventListener('load', function() {
    if (this.status === 200) {
      const blob = this.response;
      const urlObjeto = URL.createObjectURL(blob);
      elemento.src = urlObjeto;
      elemento.onload = function() {
        URL.revokeObjectURL(urlObjeto);
      };
    }
  });
  
  peticion.send();
};

Procesamiento de múltiples imágenes

Para manejar colecciones de imágenes autneticadas, se puede crear una función iterativa:

import { isNil } from 'ramda';

/**
 * Itera sobre una lista de elementos de imagen y aplica la carga autenticada.
 * @param {Array} listaImagenes - Array de objetos con información de imágenes.
 * @param {string} prefijoId - Prefijo para construir identificadores únicos en el DOM.
 */
const inicializarImagenesAutenticadas = (listaImagenes, prefijoId) => {
  if (!isNil(listaImagenes) && listaImagenes.length > 0) {
    listaImagenes.forEach((item, posicion) => {
      const idCompuesto = `imagen_${prefijoId}_${posicion}`;
      cargarImagenAutenticada(idCompuesto);
    });
  }
};

Ejemplo de uso

// En un componente de React o en la inicialización del módulo
const imagenes = [
  { identificador: 123, nombre: 'gráfico.png', ruta: '/recursos/gráfico.png' }
];
inicializarImagenesAutenticadas(imágenes, 'seccion_principal');

Mecanismos de URLs de objetos

URL.createObjectURL() genera una cadena temporal que referencia a un objeto Blob o File en la memoria del navegador. Esta URL tiene un alcance vinculado al documento que la creó.

URL.revokeObjectURL() libera la referencia a la URL del objeto, permitiendo que el navegador reutilice la memoria cuando ya no se necesite el recurso. Es esencial llamar a este método después de que la imagen se haya cargado completamente para evitar fugas de memoria.