python - 在注入(inject)的 HTML 中加载静态文件

Question

我正在尝试加载 Django 项目中注入(inject)的 html 内部的静态文件:

<div class="bottom-box" id="left">
        <span id="title">Banks and cards</span>
        {{ card_info |safe}}
</div>

这是通过 card_info 变量注入(inject)的代码:

"""
<p id="pay-card">
    <img id="pay-box-img" src="{%% static 'img/payment-card.png' %%}" height="14">
    <span id="card-number">%s x-%i %s</span>
</p>
"""

问题行是:src="{%% static 'img/payment-card.png' %%}"。

当我检查 HTML 页面时，我看到这一行:

src="{% static 'img/payment-card.png' %}"

这是我想要获取的行(取自工作静态文件):

src="/static/img/payment-card.png"

它似乎没有渲染，而且我对如何获取变量内部的静态文件链接进行渲染没有丝毫线索。

编辑

我刚刚注意到的其他事情，加载后我的 CSS 似乎不适用于 html 代码...问题已解决。

澄清上述问题；我正在 Safari 中进行测试，并且不断加载以前的 CSS，而不是我编写的新 CSS，因此我必须先清除 cookie，然后才能使用新 CSS...

分辨率

{% load staticfiles %}
{% for i in payment_info %}
<form class="card_display" method="post" action="/summary/default_swap/">
{% csrf_token %}
    <p>
        <img id="pay-box-img" src="/static/img/payment-card.png" height="14">
        <input type="hidden" name="card-number" value="{{ i.last_4 }}"/>
        <input type="submit"/>
        <span id="card-number">{{ i.card_type }} x-{{ i.last_4 }} {{i.get_default_display }}</span>
    </p>
</form>
{% endfor %}

上面的代码已经满足了我的需要。我接受的答案让我得到了这个启示。正如 @Kyle 所说，上述操作是通过传入查询集并直接在 HTML 中迭代它来完成的，以获得我需要的结果...

Answer 1

我不确定您通过上下文变量传递模板化的card_info是否有特定原因，但您可能应该使用 include tag这是 Django 提供的。 include 标记最酷的部分是，所有包含的模板都将获得与渲染模板时使用的相同上下文。

my_template.html

<div class="bottom-box" id="left">
    <span id="title">Banks and cards</span>
    {% include "card_info.html" %}
</div>

card_info.html

{% load staticfiles %}
<p id="pay-card">
    <img id="pay-box-img" src="{% static 'img/payment-card.png' %}" height="14">
    <span id="card-number">%s x-%i %s</span>
</p>