oTree：如何根据变量值条件显示对应jpg图片

错误原因说明 #

• 第一种方案报错是因为oTree（底层为Django模板引擎）不支持在{% static %}标签的参数中嵌套{{ }}模板变量，语法解析失败才会抛出参数数量错误。
• 第二种方案失效是因为{{ static }}是后端模板渲染阶段执行的标签，渲染时会直接把参数当成静态资源路径字符串处理，而JavaScript是页面发送到前端后才执行，后端渲染时根本识别不到前端定义的imageshown变量，导致路径直接写死为imageshown。

可行实现方案 #

方案1：模板路径拼接（最简便，无需JS） #

使用模板的add过滤器拼接路径，直接在后端完成渲染，代码如下：

{% with img_path="folder/"|add:player.condition_var|add:".jpg" %}
<img src="{% static img_path %}" alt="条件展示图">
{% endwith %}

方案2：模板条件判断（适配路径不规律场景） #

如果后续图片路径规则可能变动，直接用模板分支判断更易维护：

{% if player.condition_var == 1 %}
<img src="{% static 'folder/1.jpg' %}" alt="条件展示图">
{% elif player.condition_var == 2 %}
<img src="{% static 'folder/2.jpg' %}" alt="条件展示图">
{% else %}
<img src="{% static 'folder/3.jpg' %}" alt="条件展示图">
{% endif %}

方案3：前端JS动态赋值（需要JS交互的场景） #

如果必须用JS实现，需要先把后端变量和静态资源根路径提前渲染到前端，再动态给图片赋值src：

<!-- 先定义带id的img标签 -->
<img id="dynamic-img" alt="条件展示图">

{{ block app_scripts }}
<script>
// 后端渲染时直接把变量值输出到JS代码中
const condition = {{ player.condition_var }};
// 提前拿到静态资源根路径
const staticRoot = "{% static '' %}";
// 拼接完整路径赋值给img
document.getElementById('dynamic-img').src = staticRoot + "folder/" + condition + ".jpg";
</script>
{{ endblock }}

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