在Django模板中构建动态IMG URL

Question

我是Django的新手，到目前为止还可以，但我在构建动态URL时遇到了困难。

<script>console.log("{% static 'img/emblem/league/scaled/league_' %}" + {{ league.id }} + ".png");</script>

这行正常工作并输出正确的链接，在这种情况下它

/static/IMG/emblem/league/scaled/league_1729.PNG

但是在下面一行中，当我尝试构建一个动态URL以在for循环中显示不同的图像时，我在尝试使用| add时得到一个TemplateSyntaxError：因为“+”也不起作用（图像不加载）

<div class="owl-item"><img class="img-fluid" src="{% static 'img/emblem/league/scaled/league_'|add:{{ league.id }}|add:'.png' %}" alt="{{ league.name }}"></div>

/ matchstatistics / add中的TemplateSyntaxError需要2个参数，1提供

我提前搜索了很多，无法找到解决方案。

Answer 1

我建议您创建一个模板标签来管理图像网址的创建。

from django import template
from django.contrib.staticfiles.templatetags.staticfiles import static
register = template.Library()

@register.simple_tag
def get_img_url(img, *args, **kwargs):
    """Returns the img url of the given img

    .. usage::  {% get_img_url image_object %}

    """
    image_path = 'here you build your path using the img passed'
    return static(image_path)

更多信息：https://docs.djangoproject.com/en/2.1/howto/custom-template-tags/#writing-custom-template-tags

Answer 2

如果有人有兴趣，我这样解决了：

在app目录中创建一个新目录，将其命名为“templatetags”，并使用html文件的名称创建另一个.py文件。例如index.html的index.py。

from django import template
from django.conf.urls.static import static
from django.templatetags.static import static

from ..models import League

register = template.Library()

@register.simple_tag
def getLeagues():
    leagues = League.objects.filter(active=1)
    lgs = []
    for leagueObj in leagues:
        league = {
            "id": leagueObj.id,
            "name": leagueObj.name,
            "url": static('img/emblem/league/scaled/league_' + str(leagueObj.id) + '.png')
        }
        lgs.append(league)
    return lgs

在你的django模板的HTML文件中，对我来说是index.html文件。

   {% getLeagues as leagues %}
   {% for league in leagues %}
      <div class="owl-item">
          <a href="{% url 'matchstatistics:league' league.id %}">
             <img class="img-fluid" src="{{ league.url }}" alt="{{ league.name }}">
          </a>
      </div>  
   {% endfor %}

总结一下这段代码是什么？在旋转木马中显示图像，一旦您点击一个元素，它就会调用另一个具有已定义网址路径ID的网站