使用MEDIA_URL和jquery动态更改背景图像

Question

每当用户通过ajax上传图片时，我都会尝试动态更改div的背景图片。

首先，我通过ajax从视图传递图像的url到模板。然后我正在更改css的url以获取图像：

url = 'http://sitename.com/media/' + url;
block.css({
    'background-image': 'url('+url+')',
    'background-color': ''
});

现在网址变得像这样，这正如预期的那样工作：

url = http://sitename.com/media/uploaded_files/thomas.jpg

但是当我尝试使用{{MEDIA_URL}}作为其描述在django模板中使用时

url = '{{MEDIA_URL}}' + url;

我收到404错误，网址改变如下：

  

获取http://sitename.com/page-modify/67/%7B%7BMEDIA_URL%7D%7Duploaded_files/1449049938_08_images.jpg 404（未找到）

如何使用模板中的django设置中的{{MEDIA_URL}}来使用jquery更改背景图像？

Answer 1

Django无法解析放置在静态文件中的模板标记，因此您不能只将{{ MEDIA_URL }}置于此处并期望它能正常工作。

但您可以在主模板中使用它并将其另存为变量：

<script>media_url = '{{ MEDIA_URL }}';</script>

然后在javascript中使用该变量：

url = media_url + url;

Answer 2

如果您正在进行AJAX调用以将文件上传到服务器，那么您可以做的最好的事情是传递上传文件的上传完整网址的响应。

不建议使用带有文件路径的MEDIA_URL粘贴。您可以使用不同的媒体处理程序将文件上传到不同的位置。这可能会破坏你的链接。

另外：如果您尝试上传服务器上已存在名称的文件，实际文件名将无法预测（django会为其添加一些随机字符）

为了获得最佳兼容性，请从上传视图返回文件的URL，并在Javascript中使用该文件。