Как разместить расположение изображения в javascript-коде в шаблоне django

Question

Я использую файл javascript для отображения некоторых кнопок. Когда пользователь нажимает кнопку, изображение текущей кнопки заменяется другим изображением (таким образом создается эффект, который новая кнопка появляется вместо старой) и наоборот. Я создал элемент <img> с id = 'imgbutton' и использует элементы attr('src',newimage) для отображения этих кнопок.

Я помещал файл JavaScript в {{MEDIA_URL}}/js каталоге sothat файла может быть добавлен к шаблону, используя

<script type="text/javascript" src="{{MEDIA_URL}}/js/myscript.js" ></script> 

В яваскрипта кода (Jquery 1.7.1), я устанавливаю изображение как этот

.. 
var btnimg=$('#imgbutton'); 
btnimg.attr('src','{{MEDIA_URL}}/img/NewImage.png'); 

Это вызывает 404 error в javascript console..and вместо изображения отображается местозаполнитель. В шаблонах django отображается {{MEDIA_URL}}/img/OldImage.png .. это только в javascript, что проблема возникает. Может кто-нибудь помочь мне понять, почему это происходит? Как это исправить?

Answer 1

Ваша проблема заключается в том, что JS-файл не обрабатывается движком шаблонов Django. Когда мне это нужно, я обычно помещаю небольшой бит JS непосредственно на страницу для установки значений переменных, а затем на этот файл ссылается файл JS, который загружается тегом <link>.

Update:

Да, вы хотите сделать что-то вроде этого:

<script> 
// first set the value you will be using. 
var MEDIA_URL = "{{MEDIA_URL}}"; // and anything else you need to set 
</script> 

<script type="text/javascript" src="{{MEDIA_URL}}/js/myscript.js" ></script> 

Теперь вы можете ссылаться, что глобальное значение внутри файл JS, например:

btnimg.attr('src',MEDIA_URL+'/img/NewImage.png'); 

Если есть много таких вещей, массив или объект, который держит их всех, держит ваше имя espace tidy.