javascript - 如何将图像位置放入 django 模板中的 javascript 代码中

Question

我正在使用 javascript 文件来显示一些按钮。当用户单击按钮时，当前按钮的图像将被另一个图像替换(从而创建新按钮出现代替旧按钮的效果)并且反之亦然。我创建了一个 <img>具有 id='imgbutton' 的元素并使用元素 attr('src',newimage)显示这些按钮。

我将 javascript 文件放入 {{MEDIA_URL}}/js目录，以便可以使用

将文件添加到模板中

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

在javascript代码(jquery 1.7.1)中，我像这样设置图像

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

这会导致 404 error在 javascript 控制台中..并且显示占位符而不是图像。 在 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');

如果有很多这样的东西，保存所有这些东西的数组或对象可以使你的命名空间保持整洁。