Estoy actualizando un informe heredado que usa Datatables . Necesito agregar una nueva columna que muestre una imagen en miniatura, en la que se pueda hacer clic, que muestre la imagen completa en una nueva pestaña.
Los datos de la imagen se almacenan en la base de datos de PostgreSQL como BYTEA y se suministran al frontend CONCAT integrados como un URI (p. ej., " data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQA ...")
Actualmente tengo el siguiente código...
self.dataFields = [ { data: 'some', title: 'Some', visible: true }, { data: 'other', title: 'Other', visible: true }, { data: 'guff', title: 'Guff', visible: true }, { data: 'image_file', title: 'Image', visible: true, render: function(data, type, full, meta) { return ` <a href="` + data + `" target="_blank"> <img style='display:block; width:70px;height:70px;' src="` + data + `"/> </a>``; } }, ]Esto muestra una bonita miniatura y abre una nueva pestaña, pero en Chrome no hay ninguna imagen cuando la abres. Puede ver los datos de la imagen al pasar el mouse sobre la pestaña...
Si hago clic con el botón derecho en la miniatura y "Abrir en una pestaña nueva", veo los datos de la imagen en la barra de direcciones...
¿Hay alguna forma de ordenar esto en Chrome al hacer clic en la miniatura?