Django Templates配合Alpine.js循环时如何自增整数加载用户图片

问题原因 #

Django的{% static %}是服务端模板标签，会在页面返回给浏览器之前就执行完成，而你写在:src里的${index+1}是Alpine.js的客户端变量，服务端渲染阶段无法识别这个动态值，所以路径拼接必然失败。
另外{{ forloop.counter }}是Django模板循环的专属变量，只能用在Django原生的{% for %}循环标签里，你当前用的是Alpine.js的前端循环x-for，属于客户端执行逻辑，服务端的Django变量在这里完全无效。

解决方案（2种可选） #

方案1（最推荐，改动最小）

你已经在JS的items数组里预留了img字段，只要补全所有items的img属性（和你注释里的user-x.jpg对应即可），然后配合提前输出的静态资源前缀调用即可：

1. 先在模板头部输出静态资源前缀的全局JS变量
2. 修改img的src属性直接调用item里的img字段

{% load static %}
<!-- 服务端提前渲染img目录的静态路径为全局变量 -->
<script>
const AVATAR_BASE_URL = "{% static 'img/' %}";
</script>

<div x-data="libs.testimonialsCircles()">
<template x-for="(item, index) in items" :key="index" hidden>
  <img 
    class="absolute rounded-full z-10 animate-float" 
    :style="item.style" 
    :src="`${AVATAR_BASE_URL}${item.img}`" 
    :width="item.size" 
    :height="item.size" 
    :alt="`User ${index+1}`" 
    @mouseenter="active = index; commentOn = true" 
    @mouseleave="commentOn = false" 
  />
</template>
</div>

方案2（不想修改JS数组可选）

如果不想给每个item补充img属性，直接用index拼接文件名也可以，src属性改成下面的写法即可：

:src="`${AVATAR_BASE_URL}user-${index+1}.jpg`"

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