使用javascript在手工制作的页面中未显示图像_Javascript_Asp.net_Css

使用javascript在手工制作的页面中未显示图像

javascript asp.net css

使用javascript在手工制作的页面中未显示图像,javascript,asp.net,css,Javascript,Asp.net,Css,我正在使用JavaScript打印网页的一部分，其中添加了一个徽标和一些文本。我的问题是，图像的位置显示，但图像本身不存在 <script> function printdiv(printpage) { var headstr = "<html><head><title></title></head><body>"; var footstr = "</bo

我正在使用JavaScript打印网页的一部分，其中添加了一个徽标和一些文本。我的问题是，图像的位置显示，但图像本身不存在

    <script>
    function printdiv(printpage) {

        var headstr = "<html><head><title></title></head><body>";
        var footstr = "</body>";
        var logostr = "<div style=\"width: 100%; text-align: center; height: 50px;\"><div class=\"pull-right\"><img src=\"../Images/lionLogo.jpg\" width=\"50\" height=\"50\" /></div><div>some text</div></div>";

        var newstr = document.all.item(printpage).innerHTML;
        var oldstr = document.body.innerHTML;
        document.body.innerHTML = headstr + logostr + newstr + footstr;
        window.print();
        document.body.innerHTML = oldstr;

        $('#modalShowDetails').modal('hide');
        $('body').removeClass('modal-open');
        $('.modal-backdrop').remove();
        $('.fade').remove();

        return false;
    }


</script>


函数printdiv（printpage）{
var headstr=“”；
var footstr=“”；
var logostr=“一些文本”；
var newstr=document.all.item（printpage.innerHTML）；
var oldstr=document.body.innerHTML；
document.body.innerHTML=headstr+logostr+newstr+footstr；
window.print（）；
document.body.innerHTML=oldstr；
$（'#modalShowDetails'）.modal（'hide'）；
$（'body'）.removeClass（'modal-open'）；
$（'.modal background'）.remove（）；
$（'.fade'）.remove（）；
返回false；
}

您需要动态创建image元素以将image加载到DOM中

    var headstr = "<html><head><title></title></head><body>";
    var footstr = "</body>";
    var logostr = "<div style=\"width: 100%; text-align: center; height: 50px;\"><div class=\"pull-right\"></div><div>some text</div></div>";

    var newstr = document.all.item(printpage).innerHTML;
    var oldstr = document.body.innerHTML;
    document.body.innerHTML = headstr + logostr + newstr + footstr;


    var img = new Image();
    img.onload = function() {
      $('.pull-right').append(img);
    };

    //use full image source path like
    //img.src  = 'https://lh4.googleusercontent.com/-QEBhGh-wj2A/AAAAAAAAAAI/AAAAAAAAGNY/nogbhLrR0mc/photo.jpg';
    img.src = '../Images/lionLogo.jpg';
    img.width = "50";
    img.height = "50";

    //adding delay to load image
    setTimeout(function() {
       window.print();
       document.body.innerHTML = oldstr;
    }, 2000);



    $('#modalShowDetails').modal('hide');
    $('body').removeClass('modal-open');
    $('.modal-backdrop').remove();
    $('.fade').remove();

    return false;

var headstr=”“；
var footstr=“”；
var logostr=“一些文本”；
var newstr=document.all.item（printpage.innerHTML）；
var oldstr=document.body.innerHTML；
document.body.innerHTML=headstr+logostr+newstr+footstr；
var img=新图像（）；
img.onload=函数（）{
$（'.pull right'）。追加（img）；
};
//使用完整图像源路径，如
//img.src=https://lh4.googleusercontent.com/-QEBhGh-wj2A/AAAAAAAAAAI/AAAAAAAAGNY/nogbhLrR0mc/photo.jpg';
img.src='../Images/lionLogo.jpg'；
img.width=“50”；
img.height=“50”；
//添加延迟以加载映像
setTimeout（函数（）{
window.print（）；
document.body.innerHTML=oldstr；
}, 2000);
$（'#modalShowDetails'）.modal（'hide'）；
$（'body'）.removeClass（'modal-open'）；
$（'.modal background'）.remove（）；
$（'.fade'）.remove（）；
返回false；

我做了，当我评论window.print（）&document.body.innerHTML=oldstr时，它工作得很好，但我这样做的目的是打印它，而不是打印预览-@您可以尝试更新的答案。在插入图像后调用window.print（），我以前也尝试过，它也有同样的问题，我甚至在调用window.print（）之前增加了一些延迟，我的文本在那里，但窃取图像不起作用尝试使用完整的图像源路径。因为它在我的情况下有效