使用图片上传的django动态背景

Question

我环顾四周，没有找到满意的解决方案。我正在尝试使用模型通过 Django 管理界面上传图片，然后调用该上传的图片用作 div 的背景。即 - 我创建了名为 Salford City 的足球，我上传了一张球队的照片.我会有几个团队。如果我选择 Salford，那么背景会改变，如果我选择 Brighton Albion，那么背景会改变。我使用 javascript 和硬编码的城市让它工作，但我希望能够动态地进行它，而不必更改基本编码以实现轻松扩展。当前代码如下：

Models.py:

class City(models.Model):
index = models.CharField(unique=True, max_length=250, null=False, blank = False, verbose_name = 'City Inner Search Name(lowercase)')
landing_page_description = models.CharField(max_length=5000, null=True, blank = True, verbose_name = 'City Description')
name = models.CharField(max_length=250, null=False, blank = False, verbose_name = 'City Common Name')
country = models.ForeignKey(Country, null=True, blank=True)
image = models.ImageField(upload_to="images/", blank=True, null=True, verbose_name= 'City Image')

图像存储在media_files/images

html:

<div id="main" class="container-fluid citybackground">
<!-- <img src="{{ MEDIA_URL}}{{ City.image.url }}"> -->

如您所见，我尝试了多种选择。注释掉的部分是我试过的方法

css:

.citybackground
{
background-image: url( "{% images {{City.image.url}} %}");
background-repeat:no-repeat;
background-size:100%;
}

views.py:

def SetCitySession(request):
  if request.method == "POST":

    request.session['city-name'] = request.POST['cityName']
    request.session['city-id'] = request.POST['cityId']

    return JsonResponse({})


def GetCitySession(request):
  if request.method == "GET":

    cityName = request.session['city-name']
    cityId = request.session['city-id']

    context = {
        "cityName": cityName,
        "cityId": cityId
    }

    return JsonResponse(context)

这目前正在硬编码 javascript，我想停止使用它，因为它不是动态的。

function changeBackground(city){
    var urlBackground;

    switch(city){
        case "Manchester":
            urlBackground = "/static/img/fondo_main.jpg";
            break;
        case "Liverpool":
            urlBackground = "/static/img/liverpool_background.jpg";
            break;
        case "London":
            urlBackground = "/static/img/london_background.jpg";
            break;
    }

    $("#main").css("background-image", "url('{% if city.image %}{{ city.image.url }}{% else %}{"+ urlBackground + "}{% endif %}')";
}

谢谢你们

Answer 1

简单写成：

  background-image: url({{ city.image.url }});

Answer 2

对背景图片使用内联样式

<div id="main" class="container-fluid citybackground" style="background-image: url({{City.image.url}})">

Answer 3

我在完全不熟悉 Django 的时候写了这个问题，完成了一个现有的项目，同时还没有完全理解系统的工作原理。 @yusuf.oguntula 的回答在某种程度上是正确的。在这个问题中，我忽略了添加实际显示背景图像的视图，而是给出了用于在服务器上检索和设置会话数据的视图。其次，实际视图没有说明它是哪个城市，因为它没有从 django 检索城市。当时城市由 javascript 设置，但在视图本身中没有查询集或对象检索以允许与 python 语法进行交互。这意味着即使@yusuf.oguntula 建议的解决方案是正确的，但由于缺少查询集而无法正常工作。我首先通过将适当的城市检索到 views.py 中的 HomepageView 来修复此问题，如下所示：

if 'city-name' not in request.session:
    cityName='Madrid'
    request.session['city-name'] = request.POST.get('cityName')

else:
    cityName = request.session['city-name']

city = get_object_or_404(City, name=cityName)

然后在我的 html 中使用了@yusuf.oguntula 的解决方案。效果很好。

Answer 4

将内联 CSS 添加到您想要具有背景图片的元素。例如，

<div style="background: url('{{ home.image.url }}');">
</div>

这肯定有效

使用图片上传的django动态背景

dynamic Backgrounds for django using image upload

html

javascript

css

django

image-uploading