如何在警告框或确认框中显示图像？我一直在尝试使用下面的代码，但在警报框中获取图像 url。请任何人帮助我解决问题，或者如果不可能，请提供任何其他建议。
var image = document.getElementById("myImage").src="hackanm.gif";
alert("OnLoad image"+image );
【问题讨论】：
标签： javascript html css
JavaScript 中的警告框只能显示纯文本。您可以使用 jQuery 之类的 JavaScript 库来代替显示模式？
这可能有用： http://jqueryui.com/dialog/
你可以这样做：
<!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>
【讨论】：
尖刻但可能有用的答案：
http://picascii.com/（目前关闭）
https://www.ascii-art-generator.org/es.html （别忘了在每一行后面加上一个 \n！）
【讨论】：
【讨论】：
正如其他人所提到的，您不能在警报中显示图像。解决办法是在网页上显示。
如果我的网页在调试器中暂停并且我已经加载了图像，我可以显示它。不需要使用jQuery；使用本机 14 行 Javascript，它可以从代码或调试器命令行运行：
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);
}
用法：
show( myimage );
【讨论】：
使用 jQuery 对话框显示图像，试试这个代码
<html>
<head>
</head>
<body>
<div id="divid">
<img>
</div>
<body>
</html>
<script>
$(document).ready(function(){
$("btn").click(function(){
$("divid").dialog();
});
});
</script>
`
首先你必须在你的页面中包含 jQuery UI。
【讨论】：
您可以使用表情符号！
$('#test').on('click', () => {
alert('? Build is too fast');
})
【讨论】：
我创建了一个可能有帮助的函数。它所做的只是模仿警报，但放置图像而不是文本。
function alertImage(imgsrc) {
$('.d').css({
'position': 'absolute',
'top': '0',
'left': '50%',
'-webkit-transform': 'translate(-50%, 0)'
});
$('.d').animate({
opacity: 0
}, 0)
$('.d').animate({
opacity: 1,
top: "10px"
}, 250)
$('.d').append('An embedded page on this page says')
$('.d').append('<br><img src="' + imgsrc + '">')
$('.b').css({
'position':'absolute',
'-webkit-transform': 'translate(-100%, -100%)',
'top':'100%',
'left':'100%',
'display':'inline',
'background-color':'#598cbd',
'border-radius':'4px',
'color':'white',
'border':'none',
'width':'66',
'height':'33'
})
}
<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
<div class="d"><button onclick="$('.d').html('')" class="b">OK</button></div>
.d{
font-size: 17px;
font-family: sans-serif;
}
.b{
display: none;
}
【讨论】：