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

Question

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

模型.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 }});