Django技术问题：如何通过指数代码链接静态文件夹中的图片

DevOps 小满

2026-8-14

问题描述

我有一个展示ETF代码、名称及对应指数名称的表格，希望表格内每个条目点击后能跳转到static/myapp/images文件夹下的对应图片。图片命名规则为sample_regression_<指数代码>.jpg，其中指数代码存储在模型的index_ticker字段中。

硬编码图片链接（如<td><a href="{% static '/myapp/images/sample_regression_S6COND.jpg' %}" target="_blank">{{i.etf_ticker}}</a></td>）可以正常访问，但尝试用模型字段动态生成链接时（如<td><a href="{% static '/myapp/images/sample_regression_{{i.index_ticker}}.jpg' %}" target="_blank">{{i.etf_name}}</a></td>）完全失效。静态文件结构无误，所有图片均放置在static/myapp/images路径下。

相关代码

table.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ETF Table</title>
    {% load static %}
    <link rel="stylesheet" type="text/css" href="{% static 'myapp/css/table_style.css' %}">
    <style type="text/css"></style>
</head>
<body>
<div class="container">
  <table id="table" class="table table-dark table-hover table-striped table-bordered table-sm">
   <thead>
     <tr>
      <th data-sortable="true">ETF Ticker</th>
      <th>ETF Name</th>
      <th>Index Name</th>
     </tr>
   </thead>
   <tbody>
    {% if d %}
    {% for i in d %}
     <tr>
        <td><a href="{% static '/myapp/images/sample_regression_S6COND.jpg' %}" target="_blank">{{i.etf_ticker}}</a></td>
        <td><a href="{% static '/myapp/images/sample_regression_{{i.index_ticker}}.jpg' %}" target="_blank">{{i.etf_name}}</a></td>
        <td><a href="{% static '/myapp/images/sample_regression_{{i.index_ticker}}.jpg' %}" target="_blank">{{i.index_name}}</a></td>
     </tr>
   {% endfor %}
    {% endif %}
   </tbody>
  </table>
  <script>
  $('#table').DataTable({
    "bLengthChange": true,
    "lengthMenu": [ [20, 50, 100 -1], [20, 50, 100, "All"] ],
    "iDisplayLength": 20,
    bInfo: false,
    responsive: true,
    order: [[4, 'desc']],
  });
  </script>
</div>
</body>
</html>

views.py

def table(request):
    data = Table.objects.all().values()
    context = {'d': data}
    return render(request, 'table.html', context)

models.py

class Table(models.Model):
    etf_ticker = models.CharField(max_length=10)
    etf_name = models.CharField(max_length=200)
    index_name = models.CharField(max_length=200)
    index_ticker = models.CharField(max_length=10)

解决方案

问题根源是Django模板标签的解析优先级：{% static %}标签内部无法直接嵌套模板变量{{i.index_ticker}}，因为模板会先解析static标签，此时变量还未被替换，导致生成的路径无效。

提供两种可行的解决方式：

方式1：模板内用字符串拼接生成路径

利用Django模板的add过滤器，把静态路径前缀、指数代码和后缀拼接后，再传入static标签：

<td><a href="{% static 'myapp/images/sample_regression_'|add:i.index_ticker|add:'.jpg' %}" target="_blank">{{i.etf_name}}</a></td>
<td><a href="{% static 'myapp/images/sample_regression_'|add:i.index_ticker|add:'.jpg' %}" target="_blank">{{i.index_name}}</a></td>

注意：路径开头的斜杠可加可不加，Django的static标签会自动处理。

方式2：视图层预生成图片URL

在视图中提前为每个数据对象生成完整的静态图片URL，再传递给模板使用：

from django.templatetags.static import static

def table(request):
    # 不要用.values()，否则无法添加自定义属性
    data = Table.objects.all()
    for item in data:
        item.image_url = static(f'myapp/images/sample_regression_{item.index_ticker}.jpg')
    context = {'d': data}
    return render(request, 'table.html', context)

模板中直接使用预生成的URL：

<td><a href="{{i.image_url}}" target="_blank">{{i.etf_name}}</a></td>
<td><a href="{{i.image_url}}" target="_blank">{{i.index_name}}</a></td>

这种方式逻辑更清晰，适合需要多次复用图片链接的场景。

额外提示

模板中DataTable的排序配置order: [[4, 'desc']]存在问题——表格只有3列（索引从0开始），索引4超出范围会导致排序报错，建议修改为合法的列索引，比如order: [[0, 'asc']]。

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

Django技术问题：如何通过指数代码链接静态文件夹中的图片

相关代码 #