Django模板用本地图像替换模型返回的文本答案

【问题标题】：Django template replace text returned from model with local imageDjango模板用本地图像替换模型返回的文本
【发布时间】：2021-03-06 17:55:20
【问题描述】：

我有一个模型，我从中提取数据并将其添加到我页面上的表格中。我要返回一个特定字段，其中包含 64 个版本的 {x} 的组合。用相应的图像替换每个版本。

例如以{B},{B}{U},{B}{B},{1}{W}{R}的格式返回数据。 {x} 有 64 个不同版本，可以任意组合排列。每个版本我都有对应的.png 文件，我正在尝试用图像替换文本。

我下面的代码仅在版本的单个实例时才有效，但是我也认为如果我为 64 个版本中的每一个都执行此操作将非常低效。如果有多个相同的版本，例如，它不起作用。 {B}{B}

有没有一种方法可以循环遍历每一个并用正确的图像替换它。

html

<td class="">
  {% if "{B}" in card.colors %}<img class="icon" src="{% static 'img/symbology/{B}.png' %}">{% endif %}
  {% if "{G}" in card.colors %}<img class="icon" src="{% static 'img/symbology/{G}.png' %}">{% endif %}
  {% if "{R}" in card.colors %}<img class="icon" src="{% static 'img/symbology/{R}.png' %}">{% endif %}
  {% if "{U}" in card.colors %}<img class="icon" src="{% static 'img/symbology/{U}.png' %}">{% endif %}
  {% if "{W}" in card.colors %}<img class="icon" src="{% static 'img/symbology/{W}.png' %}">{% endif %}
  ...
</td>

更新：

{x}有64个版本，例如{1},{2},{3},{4},{5}等。64个版本是单数。所以每个版本都有对应的img。

但是每个版本都可以任意组合。

例如：

如果返回的数据为{R}，则应替换为下图：

但如果返回的数据是{R}{R}{R}，则应替换为：

所以它会得到图像 3 次。

字符和大括号与图像的名称相对应。因此以上内容应替换为三个<img class="icon" src="{% static 'img/symbology/{R}.png' %}">

这需要是动态的，因为模型返回了许多记录，并且返回的数据可以是 {x} 的任意组合

【问题讨论】：

标签： python html python-3.x django django-templates

【解决方案1】：

我不确定我是否完全理解您的问题，但您是否尝试循环浏览图像并将它们与图像 URL 的其余部分连接起来？我会尝试类似：

{% for combo in card.colors %}
<img class="icon" src="{% static 'img/symbology/{{ combo }}.png' %}">
{% endfor %}

【讨论】：

我已经更新了问题，希望它更清楚。
所以说它返回 {5}，您希望该图像被渲染 5 次？以及模型究竟返回什么数据类型。是整数还是字符串？
所以如果它返回{5}，它将被{5}.png 图像替换。 postgres 中的数据类型为character varying[]。
如果它返回 {R}{R}{R} 您希望图像渲染 3 次？这部分让我有点困惑，因为它返回一个字符串，并且您希望它根据返回的数据的长度/大小来呈现图像
正确。我认为这就是我遇到问题的原因，因为我需要拆分它，然后使用每个 {x} 来呈现正确的对应图像。

【解决方案2】：

我设法解决了。

我首先遍历模型字段card.colors，它返回.png 文件所需的字符。

在这个循环中，然后我使用循环中的i 渲染图像。

<td class="">
  {% for i in card.colors %}
      <img class="icon" src="{% static 'img/symbology/{'|add:i|add:'}.png' %}">
  {% endfor %}
</td>

【讨论】：