Base64 Image open in new tab: Window is not allowed to navigate Top-frame navigations to data URLs
A javascript solution:
var newTab = window.open();
newTab.document.body.innerHTML = '<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==" width="100px" height="100px">';
There's a lot of ways that you can change the way window.open() behaves, check out the documentation. It also shouldn't be hard to create some css/html that will mimic the way Chrome displays images in new tabs. The ability to load data:
URLs was removed for security reasons, so you're out of luck if you're looking for a way to do that.
You can use this function to open any base 64 data URI in a new tab:
function openBase64InNewTab (data, mimeType) {
var byteCharacters = atob(data);
var byteNumbers = new Array(byteCharacters.length);
for (var i = 0; i < byteCharacters.length; i++) {
byteNumbers[i] = byteCharacters.charCodeAt(i);
}
var byteArray = new Uint8Array(byteNumbers);
var file = new Blob([byteArray], { type: mimeType + ';base64' });
var fileURL = URL.createObjectURL(file);
window.open(fileURL);
}
In your case with the image, you'd use it like this:
openBase64InNewTab('YOUR_BASE64_DATA', 'image/png');