如何基于Django数据在轮播组件中渲染动态二维码？

问题根源：服务器端Django模板渲染时，脚本里的{{a.URL}}会被最后一个循环的广告URL覆盖，导致所有二维码用同一个链接。

修改步骤： #

1. 更新模板代码：给每个二维码容器添加data-url属性，存储对应广告的URL

<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    {% for a in advertising %} 
      <div class="carousel-item carousel-item1 {% if forloop.first %}active{% endif %}" data-bs-interval="2000">
        <h3 class="install-app">{{a.advertising_text}}</h3>
        <!-- 新增data-url属性存储当前广告的URL -->
        <div class="qr-wrapper" data-url="{{a.URL}}"></div>
      </div>
    {% endfor %}
  </div>
</div>

2. 修改脚本代码：读取每个容器的data-url属性生成对应二维码

function qrCodeMaker() {
  const qrs = document.querySelectorAll(".qr-wrapper");
  qrs.forEach(function (qrElement) {
    // 获取当前容器对应的URL
    const targetUrl = qrElement.getAttribute('data-url');
    new QRCode(qrElement, {
      text: targetUrl,
      colorDark: "#002F43",
      colorLight: "#F5F7F7"
    });
  });
}

// 调用生成函数
qrCodeMaker();

原理说明：通过DOM的自定义数据属性data-url，将每个广告的URL绑定到对应的二维码容器上，客户端脚本遍历容器时读取各自的URL，就能生成不同链接的二维码。

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