画像の場所をDjangoテンプレートのJavaScriptコードに入れる方法

Question

私はJavaScriptを使ってボタンを表示しています。ユーザーがボタンをクリックすると、現在のボタンの画像が別の画像に置き換えられます。古いボタンの代わりに新しいボタンが表示されます）。逆の場合は、id = 'imgbutton'の<img>要素を作成し、要素をattr('src',newimage)で表示します。私は、ファイルsothat {{MEDIA_URL}}/jsディレクトリ内のJavaScriptファイルを入れていた

はjavascriptのコードで

<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'); 

これは、javascript console..121に404 errorが表示され、画像の代わりにプレースホルダが表示されます。 djangoテンプレートでは、{{MEDIA_URL}}/img/OldImage.pngが正しく表示されています。これは問題が発生したjavascriptでのみ表示されます。なぜ誰かがこの問題が発生するのを理解できたらいいですか？

Answer 1

あなたの問題は、JSファイルがDjangoのテンプレートエンジンによって処理されないということです。私はこれを行う必要があるときに通常、変数値を設定するためにJSの小さなビットをページに直接配置し、それは<link>タグでロードされたJSファイルによって参照されます。

更新：

<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'); 

はい、あなたはこのような何かをしたいです

これらのものがたくさんある場合、そのすべてを保持している配列またはオブジェクトは、名前を保持しますエスケープティッシュ。