JavaScript函数中无法加载静态图片文件问题咨询

你遇到的核心问题是：Flask模板的{{url_for()}}是服务器端渲染的，当你把设置图片src的逻辑放进createEasyDiag函数后，如果这个函数是在模板渲染完成后才执行（比如函数定义在外部JS文件、或者动态触发），模板引擎不会再解析函数内部的{{url_for()}}，导致图片src被设置成了原始的模板字符串，而非实际的图片URL，所以加载失败返回undefined；而外部URL是直接的字符串，不需要服务器解析，所以能正常显示。

解决办法 #

方法1：提前将静态图片URL存入全局变量 #

在HTML的脚本块里先把渲染好的URL存成全局变量，让createEasyDiag函数可以直接调用：

<div class="top" id="easyDiag"> 
    <div class="easyDiag"><div class="top">DnsStatus </div><img id="dnsStatus" class="easyDiagImg"/></div>                
    <script type="text/javascript">                        
        // 提前渲染好图片URL，存入全局变量
        window.dnsCheckImgUrl = "{{url_for('static', filename='css/greencheck.png')}}";
        window.dnsCrossImgUrl = "{{url_for('static', filename='css/redcross.png')}}";

        function createEasyDiag(tables) {
            const img = document.getElementById("dnsStatus");
            // 根据变量选择图片
            img.src = 你的状态变量 ? window.dnsCheckImgUrl : window.dnsCrossImgUrl;
        }

        createEasyDiag(tables)
    </script>
</div>

方法2：直接使用静态图片的相对路径 #

如果你的静态文件结构固定（比如static/css/下的图片），可以直接写相对路径，不需要url_for：

function createEasyDiag(tables) {
    const img = document.getElementById("dnsStatus");
    // 直接用相对路径，前提是当前页面的URL和静态资源的相对关系固定
    img.src = "/static/css/greencheck.png";
}

方法3：把createEasyDiag函数写在模板内（如果允许的话） #

如果函数不需要复用，直接把函数定义在HTML的脚本块里，让模板引擎直接解析内部的url_for：

<div class="top" id="easyDiag"> 
    <div class="easyDiag"><div class="top">DnsStatus </div><img id="dnsStatus" class="easyDiagImg"/></div>                
    <script type="text/javascript">                        
        function createEasyDiag(tables) {
            const img = document.getElementById("dnsStatus");
            // 这里的url_for会被服务器正常渲染
            img.src = "{{url_for('static', filename='css/greencheck.png')}}";
        }

        createEasyDiag(tables)
    </script>
</div>

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