Пытаюсь захватить случайную картинку через JS, но не получается работать должным образом

#javascript #html #django

#javascript #HTML #django

Вопрос:

Привет, ребята, я разработчик django и пытаюсь получить случайное изображение через JS в html, как показано ниже

img работает, и он случайным образом выбирает одно из изображений.

Однако путь будет <img src= '/static/" + img +"'> .

Вместо того, что я хочу, например <img src= "{% static 'img/indexBg_1.png' %}" >

Сообщение об ошибке: GET http://192.168.7.64:8000/static/img/" + pic + " 404 (не найдено)

Может ли кто-нибудь просветить меня, чтобы решить эту проблему? Спасибо!

 <script type="text/javascript">
    window.onload=function(){
        ImageArray = new Array();
        ImageArray[0] = 'img/indexBg_1.png';
        ImageArray[1] = 'img/indexBg_2.png';
        ImageArray[2] = 'img/indexBg_3.png';
        var num = Math.floor( Math.random() * 3);
        var img = ImageArray[num];
        var path = " <img src= '{% static '"   img  "'%}'>"  
        console.log(img)
        console.log(path)
        }        
</script>
 

Комментарии:

1. Похоже, вы пытаетесь создать шаблон Django с использованием JavaScript. Это не сработает.

Ответ №1:

если вам нужен путь, он должен быть чем-то вроде:

 var path = window.location.href  '/static/'  img;
 

но если вы хотите добавить изображение с этим путем внутри div:

 var element = document.getElementById("div1");
element.innerHTML=`<img src=${path} />`;
 

еще лучше сделать:

 var path = window.location.href  '/static/'  img;
var myimg = document. createElement("img");
myimg.src = path;
var element = document.getElementById("div1");
element.appendChild(myimg);