哈喽！今天心血来潮给大家带来了《Flask动态设置图片路径的JS方法》，想必大家应该对文章都不陌生吧，那么阅读本文就都不会很困难，以下内容主要涉及到，若是你正在学习文章，千万别错过这篇文章~希望能帮助到你！

动态图片展示

关键点：

• id="server-data"：为脚本标签提供一个唯一的ID，以便JavaScript能够轻松地找到它。
• type="application/json"：这是至关重要的一点。浏览器只会执行type="text/javascript"（或默认类型）的脚本。指定为application/json后，浏览器会将其视为数据块而非可执行代码，从而避免了语法错误。
• {{ data | safe }}：data是Flask视图函数传递过来的JSON字符串。| safe过滤器是必要的，它告诉Jinja2不要对这个字符串进行HTML转义，因为我们希望它作为原始JSON被插入。

3. JavaScript 中的应用

最后，在你的外部JavaScript文件（例如static/js/main.js）中，你可以通过ID获取到这个脚本标签，读取其textContent，然后使用JSON.parse()将其解析为JavaScript对象。之后，你就可以像访问普通对象一样，获取到所需的图片路径并设置给DOM元素。

// static/js/main.js

document.addEventListener('DOMContentLoaded', function() {
    // 1. 获取包含JSON数据的脚本标签
    const dataScript = document.getElementById("server-data");

    if (dataScript) {
        try {
            // 2. 解析JSON字符串为JavaScript对象
            const pageData = JSON.parse(dataScript.textContent);

            // 3. 获取图片元素
            const uploadImgElement = document.getElementById("uploadimg");

            // 4. 使用解析出的路径设置图片src属性
            if (uploadImgElement && pageData.uploadImageUrl) {
                uploadImgElement.setAttribute("src", pageData.uploadImageUrl);
                console.log("图片路径已成功设置:", pageData.uploadImageUrl);
            } else {
                console.warn("未找到图片元素或图片路径。");
            }

            // 你也可以访问其他传递的数据
            console.log("其他设置:", pageData.otherSetting);

        } catch (error) {
            console.error("解析服务器数据失败:", error);
        }
    } else {
        console.error("未找到ID为 'server-data' 的脚本标签。");
    }
});

代码解析：

• document.addEventListener('DOMContentLoaded', ...)：确保在DOM完全加载后再尝试访问元素，避免出现null引用。
• document.getElementById("server-data")：通过ID获取到HTML中嵌入的脚本标签。
• dataScript.textContent：获取脚本标签内部的文本内容，即JSON字符串。
• JSON.parse()：将JSON字符串转换为JavaScript对象，这样我们就可以通过点语法（pageData.uploadImageUrl）来访问其中的属性。
• uploadImgElement.setAttribute("src", ...)：将动态获取到的图片路径赋值给元素的src属性。

总结

通过在Flask后端生成动态路径并将其序列化为JSON字符串，然后通过带有type="application/json"的脚本标签嵌入到HTML中，最后在外部JavaScript中解析并使用这些数据，我们成功地解决了从外部JavaScript文件动态设置Flask应用中图片路径的问题。这种方法不仅适用于图片路径，也适用于任何需要在服务器端生成并传递给客户端JavaScript的动态数据，提供了安全、灵活且易于维护的数据传输机制。

本篇关于《Flask动态加载图片的JS实现方法》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！