JSFiddle - React, Tailwind, and code Playground

HTML

<div class='container1'>
    <div class='box photo col3'> <img data-image='http://upload.wikimedia.org/wikipedia/commons/4/4a/Logo_2013_Google.png'/></div>
</div>

CSS

img {
    width: 400px;
}

JavaScript

function convertImgToBase64(url, callback, outputFormat){
	var canvas = document.createElement('CANVAS');
	var ctx = canvas.getContext('2d');
	var img = new Image;
	img.crossOrigin = 'Anonymous';
	img.onload = function(){
		canvas.height = img.height;
		canvas.width = img.width;
	  	ctx.drawImage(img,0,0);
	  	var dataURL = canvas.toDataURL(outputFormat || 'image/png');
	  	callback.call(this, dataURL);
        // Clean up
	  	canvas = null; 
	};
	img.src = url;
}

$("[data-image]").each( function( index, element ){
    convertImgToBase64($( this ).data('image'), function(base64Img){
        $(element).attr('src', base64Img);
    });

});