使用JavaScript插入HTML图片标签时遇到问题
我正在使用以下代码：
var oDiv = document.createElement ("DIV");
oDiv.innerHTML='<img src="{{ url_for(\'static\', filename=\'images/bubble4.png\') }}">'
我想把一个图片从我的JavaScript文件插入到我的HTML文件中。你可以看到，我在用Flask。innerHtml看起来是有效的，因为那些坏掉的图片链接确实出现了。我觉得问题可能出在Flask的url_for语法中各种不同的双引号和单引号上，但我不知道该怎么正确处理这些引号。如果我手动把img标签加到我的HTML里，图片就能正常显示。
有什么想法吗？
2 个回答
0
Jinja这部分是在服务器上运行的，运行的结果会发送到客户端，然后客户端会执行（或者不执行）JavaScript代码。换句话说，Jinja这部分不需要进行任何转义（不过你需要确保最终生成的代码是正确引用和转义的）。
4
{{ ... }} 这个模板标签在 JavaScript 中不需要担心引号的问题，因为它会在被当作 JavaScript 解释之前就被替换成 URL。
换句话说，你不需要对那些引号进行转义：
oDiv.innerHTML = '<img src="{{ url_for('static', filename='images/bubble4.png') }}">';
不过，如果你把这个放在你 static/ 文件夹里的 JavaScript 文件中，那么 Jinja2 的代码就不会执行；这只适用于动态模板，而不适用于静态资源。
确保你把这个放在一个模板里；你可以让你的主宏把这个 URL 作为 data- 属性添加到你的 HTML 主体中，例如：
<body data-bubble-img="{{ url_for('static', filename='images/bubble4.png') }}">
然后让你的 JavaScript 加载这个：
var bubble_img = $('body').data('bubble-img');
oDiv.innerHTML = '<img src="' + bubble_img + '">';