I have the following JS code ran through PHP
echo "<script>
$('#sessionImage').css('background', 'url(data:image/png;base64,$sessionThumbnail)center center no-repeat');
$('#sessionImage').css('background-size','cover');
</script>";
My issue is that for some reason it stops rendering at $sessionThumbnail
and since nothing else is run, then the image does not get displayed.
Such as this is what is shown when I do inspect element after the page has been rendered
$('#sessionImage').css('background', 'url(data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAb0AAAEpCAIAAACIu2tGAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8
YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAP+lSURBVHhehP1leFxZgqaL5v1xf5znOedMT09NV1VmGsXMLFlsy8zMMjPbspiZmZmlkBTMzMwRYma0wLJsSd53bSkru3q6Z27kVzt3hEJBWfHG+621duiX4OCn7m5B
dvZH9uzxtbJ4c/cmEdHxpbaJVFOSlZMc9eHx+/Dn2fRO5dzwxMSAmM9oL89LifsckZNQjmlmdYt7x7XS
[...]DKmk/SrlsFwyLIG5CTLKwSJiXzDCrkJ9mRD1Aee6S9Ih+8JAc23c3ZWWbKjy9mqGpz76IqRqUsZ4JR9yOGFo…
and then it stops
Essentially leaving out this entire portion
)center center no-repeat');
$('#sessionImage').css('background-size','cover');
</script>";
I am wondering if it has to do with the size of BLOB, since it's quite lenghtly.
update
$('#sessionImage').css('background', 'url(data:image/png;base64,base64_encode(iVBORw0KGgoAAAANSUhEUgAAAb0AAAEpCAIAAACIu2tGAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAP+lSURBVHhehP1leFxZgqaL5v1xf5znOedMT09NV1VmGsXMLFlsy8zMMjPbspiZmZmlkBTMzMwRYma0wLJsSd53bSkru3q6Z27kVzt3hEJBWfHG+621duiX4OCn7m5BdvZH9uzxtbJ4c/cmEdHxpbaJVFOSlZMc9eHx+/Dn2fRO5dzwxMSAmM9oL89LifsckZNQjmlmdYt7x7XSCSVugFvXS6/pZpTp6WXdjHodpVFLqZegSkjVaTXp78OfXf70/O7bJ4/CX36KC0mICUlKTykuKWmpLq5aWFqBIGhhfUPf36dQint47G6hQCvgdXOZ3SyCloaUENtkmAZBbcb7IJejfzcJcbLcqLvHvW++XHXnZ+nJlhNmyGsu940NCz0teE+PZge5OB90eu/tFerlfNbc+qm7b+Ut366bR2+bm/hZOh82sjtp7HXsgF3LhUO9T+x/5DkPP7bqeek/Geu4OVC9NSrd6suFOK+nQh2+lBwTP3HmXT8wk35lJsZ5re3BRmMQ1HJCH+ssu+veF+myREmczvGrPW6c62eGvRvQG+45Eemq/+AK4Z8o3rndcTF32WsZ7OoR6u5UdNG+6rR9+SVXWVXY17GR1WVobWXr2w/oxxZ43j8h6MfO9r88wdfY3snO/h9nl79Dw3M/JP0LZHEfkqWtpxDaOE1fthaWtr/MrE0OzfZIe3kkOY7ZQ6pnFhV0xdUSUsswcUWoCIKkVjXEXdtaXYV+KmbkvF7k8JJ2+EvP0sbUCrRUyypgjyC6hF0V+Mq5r8tL618VIwKGrkvWz51dnv6+/ /jH9xHhESkRiUUxWfWZFcTyLnkDVvfLq/Cm5JyGhLikN/eefb4Thshq1ZEYInSluCOZ3RwpQSb00kol6ILG3LDkz8/jPn+OCY/NSy2vyOsktoiEeNmQSDkOAMdBjQoRw1KEhlOPakzMT3+dHPUsLfJDdlxUY1E2qq5aw2YoKGgdraOXjhB21vLbW5QUxkDJM2nKM/CWWN/Ymhobn+zuH9b1DKmk/SrlsFwyLIG5CTLKwSJiXzDCrkJ9mRD1Aee6S9Ih+8JAc23c3ZWWbKjy9mqGpz76IqRqUsZ4J…