I'm updating a legacy report which uses Datatables. I need to add a new column showing a thumbnail image, which is clickable, showing the full image in a new tab.

The image data is stored in the PostgreSQL database as BYTEA and supplied to the frontend CONCATenated together as a URI (e.g. "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQA...")

Currently I have the following code...

    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>``;
            }
        },
    ]

This renders a nice thumbnail and opens a new tab, but in Chrome there's no image when you open it. You can see the image data when hovering the mouse over the tab...

If I right-click the thumbnail and "Open in new tab", I see the image data in the address bar...

Is there a way to sort this in Chrome when clicking on the thumbnail?