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

【问题标题】：Change the background-image dynamically using MEDIA_URL and jquery使用 MEDIA_URL 和 jquery 动态更改背景图像
【发布时间】：2016-03-06 12:35:09
【问题描述】：

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

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

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

现在 url 变成了这样，并且按预期工作：

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

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

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

我收到 404 错误，并且 URL 更改如下：

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

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

【问题讨论】：

您将{{ MEDIA_URL }} 放在哪里？在哪个文件中？
@GwynBleidD 在js文件中

标签： jquery ajax django django-templates django-views

【解决方案1】：

Django 无法解析放置在静态文件中的模板标签，所以你不能只将{{ MEDIA_URL }} 放在这里并期望它能够正常工作。

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

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

然后在您的 javascript 中使用该变量：

url = media_url + url;

【讨论】：

能否将您的两个答案加在一起，这对其他用户也将更有帮助。谢谢你，它现在可以工作了。
这些是单独的替代解决方案。它们不应该作为一个答案加入。

【解决方案2】：

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

不推荐将MEDIA_URL 与文件路径粘贴在一起。您可以使用不同的媒体处理程序将文件上传到不同的位置。这可能会破坏您的链接。

另外：如果你要上传的文件名已经存在于服务器上，实际的文件名将是不可预测的（django 会添加一些随机字符）

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

【讨论】：

如何获取文件的url？我认为图像的领域就足够了。