Laravel项目中JavaScript加载图片不显示问题求助（打印场景）

首先，咱们来拆解下问题：直接在HTML里插入图片能正常显示，但通过JavaScript动态添加后（尤其是在打印场景下）无法显示，这通常和图片加载时机、模板变量渲染时机或者DOM操作逻辑有关。结合你的代码，我整理了几个关键的修复点：

1. 动态图片未加载完成就触发打印 #

你当前的逻辑是创建img元素后立刻执行打印，但图片需要时间加载，浏览器可能还没完成图片渲染就触发了打印操作，导致图片空白。

修复方案：监听图片的load事件，等图片完全加载后再执行打印。

2. Session值的渲染时机错误 #

你的Blade模板语法{{ Session::get('qrcode') }}是在页面首次加载时由服务器渲染的固定值，如果AJAX请求后Session中的qrcode已经更新，JS里的图片路径还是旧的，自然加载不到新图片。

修复方案：在AJAX的success回调中，从返回的data里获取最新的qrcode路径（建议后端接口返回这个路径），而不是依赖页面加载时的Session值。

3. DOM操作逻辑冗余且易出问题 #

你既用document.createElement创建了img元素，又在innerHTML里重复添加相同的图片标签，而且document.all.item这种写法比较老旧，兼容性也不好。

优化方案：统一用更规范的DOM操作方式，或者直接拼接HTML字符串，但要确保路径正确。

修改后的完整代码示例 #

function printdiv(divID) {
    var nom = document.getElementById('nom').value;
    var prenom = document.getElementById('prenom').value;
    var token = $("input[name='_token']").val();
    @foreach($champs as $input)
        var {{ $input->formInputs->input }} = document.getElementById('{{ $input->formInputs->input }}').value;
    @endforeach

    $.ajax({
        url: "{{ route('printform',['id'=> $id]) }}",
        method: 'POST',
        data: {
            nom: nom,
            prenom: prenom,
            _token: token
            @foreach($champs as $input)
                , {{ $input->formInputs->input }}: {{ $input->formInputs->input }}
            @endforeach
        },
        success: function(data) {
            // 假设后端接口返回了最新的qrcode路径，比如 data.qrcode_url
            var qrcodeUrl = data.qrcode_url || "{{ url('/') }}/qrcodes/{{ Session::get('qrcode')}}";
            
            var printContent = `
                <h2 style='text-align:center; font-size:50px'>${nom} ${prenom}<br></h2>
            `;
            @foreach($champs as $input)
                printContent += `<h2 style='text-align:center; font-size:46px'>${{ $input->formInputs->input }}<br></h2>`;
            @endforeach
            printContent += `<img src='${qrcodeUrl}' style='width:100PX' id="print-qr">`;

            var printDiv = document.getElementById(divID);
            printDiv.innerHTML = printContent;

            // 监听图片加载完成后再打印
            var qrImg = document.getElementById('print-qr');
            qrImg.onload = function() {
                var headstr = "<html><head><title></title></head><body style='width: 350px'>";
                var footstr = "</body>";
                var newstr = printDiv.innerHTML;
                var oldstr = document.body.innerHTML;
                
                document.body.innerHTML = headstr + newstr + footstr;
                window.print();
                document.body.innerHTML = oldstr;
                printDiv.innerHTML = "";
            };

            // 处理图片加载失败的情况
            qrImg.onerror = function() {
                alert("二维码图片加载失败，请检查路径");
                // 恢复原页面内容
                printDiv.innerHTML = "";
            };

            $.post('', { "from": "HM43", "nom": nom, "prenom": prenom });
        }
    });
}

额外建议 #

• 后端的printform接口最好返回生成好的qrcode的完整URL，这样能避免Session值不一致的问题；
• 尽量避免用document.all这种过时的API，改用标准的document.getElementById；
• 打印前可以给页面添加一些样式，确保打印内容的排版符合预期。

内容的提问来源于stack exchange，提问作者khalid