使用 javascript 和 Django 框架更改 img 标签 src 值

Question

我正在尝试使用 Javascript 在页面加载时从字典中加载随机图像。这是 HTML

  <div class="img-container">
    {% load static %}
    <img id="qimage" src="{% static '' %}"></img>
  </div>

所以基本上我想在页面加载时将 src 更改为从字典中随机生成的图像 src：这是 Javascript：

window.onload = function(){ 
  var image = document.getElementById("qimage");
  let src = getRandomImage();
  image.setAttribute("src",src);
}

这是生成随机图像 function：

function getRandomImage(){
 var keys = Object.keys(dict);
 var index = getRandomInt(0,keys.length);
 var selection = keys[index];
 var image = dict[selection][0];
 return image;
}

最后这是字典：

var dict = {
 "barrackStreet":["{% static 'images/hard/bstreet.jpg' %}",{"lat":51.893897,"lng":-8.477632}],
 "GrandParade":["{% static 'images/hard/gparade.jpg' %}",{"lat":51.893897,"lng":-8.477632}],
 "PatricksHill":["{% static 'images/hard/phill.jpg' %}",{"lat":51.893897,"lng":-8.477632}],
};

Answer 1

为什么不将该逻辑移至 Python/Django？ 这样你就不需要编写 JS 代码了。 请注意，这仅在您的dict变量具有固定值并且不是从 JS 端随机生成时才有效。

您可以使用 Django 的内置过滤器random从列表中随机选择一个值。 制作一个包含您的图像目录的列表，如下所示：

dict = {
 "barrackStreet":["{% static 'images/hard/bstreet.jpg' %}",{"lat":51.893897,"lng":-8.477632}],
 "GrandParade":["{% static 'images/hard/gparade.jpg' %}",{"lat":51.893897,"lng":-8.477632}],
 "PatricksHill":["{% static 'images/hard/phill.jpg' %}",{"lat":51.893897,"lng":-8.477632}],
}
img_list = [v[0] for k,v in dict.items()]

然后将其从您的视图传递到您的模板，并在您的模板中像这样呈现它：

<img id="qimage" src="{{ img_list|random }}"></img>