How do I display image in Alert/confirm box in Javascript?
Alert boxes in JavaScript can only display pure text. You could use a JavaScript library like jQuery to display a modal instead?
This might be useful: http://jqueryui.com/dialog/
You can do it like this:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Dialog - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
body {
font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif";
font-size: 62.5%;
}
</script>
<script>
$(function() {
$( "#dialog" ).dialog();
});
</script>
</head>
<body>
<div id="dialog" title="Basic dialog">
<p>Image:</p>
<img src="http://placehold.it/50x50" alt="Placeholder Image" />
</div>
</body>
</html>
Snarky yet potentially useful answer:
http://picascii.com/ (currently down)
https://www.ascii-art-generator.org/es.html (don't forget to put a \n after each line!)
Short answer: You can't.
Long answer: You could use a modal to display a popup with the image you need.
You can refer to this as an example to a modal.
As other have mentioned you can't display an image in an alert. The solution is to show it on the webpage.
If I have my webpage paused in the debugger and I already have an image loaded, I can display it. There is no need to use jQuery; with this native 14 lines of Javascript it will work from code or the debugger command line:
function show(img){
var _=document.getElementById('_');
if(!_){_=document.createElement('canvas');document.body.appendChild(_);}
_.id='_';
_.style.top=0;
_.style.left=0;
_.width=img.width;
_.height=img.height;
_.style.zIndex=9999;
_.style.position='absolute';
_.getContext('2d').drawImage(img,0,0);
}
Usage:
show( myimage );