如何在HTML模板中基于img的src属性值编写条件判断语句

推荐优先使用模板层判断，逻辑和你现有生成图片src的逻辑完全对齐，无需前端额外执行代码，性能更稳定：

方案1：Django模板层直接判断（推荐） #

你生成workflowVisual图片src的逻辑本身就是基于form.status.value|slugify的值实现的，直接复用该条件即可实现 reviewer 显示控制，在你需要展示审核人信息的位置插入以下模板代码即可：

{% if form.status.value|slugify == '1' %}
    {{ instance.reviewer2 }}
{% elif form.status.value|slugify == 'firststep' %}
    {{ instance.reviewer1 }}
{% endif %}

方案2：前端JS根据渲染后的src判断 #

如果你的场景必须依赖实际渲染后的img src属性做判断，可以通过JS实现：

1. 先在HTML中插入用于展示审核人的容器标签：

<span id="reviewerContainer"></span>

2. 插入JS逻辑读取img的src属性后匹配赋值：

document.addEventListener('DOMContentLoaded', function() {
  const workflowImg = document.getElementById('workflowVisual');
  const reviewerContainer = document.getElementById('reviewerContainer');
  const imgSrc = workflowImg.src;

  if (imgSrc.includes('taak-toegewezen')) {
    reviewerContainer.textContent = '{{ instance.reviewer2|escapejs }}';
  } else if (imgSrc.includes('firststep')) {
    reviewerContainer.textContent = '{{ instance.reviewer1|escapejs }}';
  }
})

注意：此处加escapejs过滤器是为了避免审核人字段包含特殊字符导致JS执行报错。

内容的提问来源于stack exchange，提问作者Rob de Leeuw