Django：如何根据表单中的选定选项在模板上显示来自 Django 数据库的图像？

Question

我是 django 的初学者，几周来我一直在努力将表单中用户选择的选项与我的数据库中的数据相关联，以列出所选品牌的徽标和汽车模型图像模板。

到目前为止，我已经设法将所选表格中的数据存储在数据库中（MasinaSelectata 模型），数据根据客户端的 ip 进行更新。

现在我需要使用存储在（MasinaSelectata 模型）中的数据，并在（Constructor 模型）中列出品牌标志，在（模型模型）中列出模型图像。由于缺乏经验和知识，我没有做到。

我尝试了几种变体，none 成功了，我最后一次尝试是下面的。

型号：

class Constructor(models.Model):
constructor_nume    = models.CharField(max_length=100, unique=True)
slug                = models.SlugField(max_length=150, unique=True)
logo_constructor    = models.ImageField(upload_to='photos/selectormasina', blank=True)

class Model(models.Model):
constructor         = models.ForeignKey(Constructor, on_delete=models.CASCADE)
model_nume          = models.CharField(max_length=200, unique=True)
slug                = models.SlugField(max_length=250, unique=True)
imagine_model       = models.ImageField(upload_to='photos/selectormasina', blank=True)

class Versiune(models.Model):
constructor         = models.ForeignKey(Constructor, on_delete=models.CASCADE)
model               = ChainedForeignKey(Model, chained_field="constructor", chained_model_field="constructor",
    show_all=False,
    auto_choose=True,
    sort=True)
versiune_nume       = models.CharField(max_length=300, unique=True)
slug                = models.SlugField(max_length=350, unique=True)

class MasinaSelectata(models.Model):
constructor = models.ForeignKey(Constructor, on_delete=models.CASCADE)
model       = models.ForeignKey(Model, on_delete=models.CASCADE)
versiune    = models.ForeignKey(Versiune, on_delete=models.CASCADE)
clientip    = models.CharField(max_length=20)

Views.py:

def get_client_ip(request):
x_forwarded_for = request.META.get('HTTP_X_FORWARDED_FOR')
if x_forwarded_for:
    ip = x_forwarded_for.split(',')[0]
else:
    ip = request.META.get('REMOTE_ADDR')
return ip   

def logo(request):
ip = get_client_ip(request)
select = MasinaSelectata.objects.filter(clientip = ip)
context = { 'select': select}
return render(request, 'navbar.html', context)

模板： navbar.html

<div class="col-lg-2 col-md-3 col-6 ">
 <!-- logo marca-->
 <div class="img-fluid">
 <img src="{{ select.constructor.logo_constructor.url }}" alt="{{select.logo.constructor.constructor_nume.url}}"></div>
</div>

我研究了 django 文档、google、youtube 和 SO，但我似乎没有找到解决方案。我确定这是我遗漏的东西，所以请帮助我。

Answer 1

我终于找到了解决办法：

Views.py:

显示所选制造商的标志

def get_imagine_constructor_data(request, *args, **kwargs):
selected_constructor = kwargs.get('producator')
img_constructor = 
list(Constructor.objects.filter(constructor_nume=selected_constructor).values())
return JsonResponse({'data':img_constructor})

显示所选模型的图像

def get_imagine_model_data(request, *args, **kwargs):
selected_model = kwargs.get('model')
img_modele = list(Model.objects.filter(model_nume=selected_model).values())
return JsonResponse({'data':img_modele})

Url.py

path('imagine-masina-json/<str:model>/', views.get_imagine_model_data, 
name='imagine-masina-json'),

path('imagine-constructor-json/<str:producator>/', 
views.get_imagine_constructor_data, name='imagine-constructor-json'),

我使用脚本将数据库中的数据与客户所做的选择相关联，并显示与选择相对应的图像。对我来说，这样更容易。

模板：navbar.html

<div class="img-fluid" id="imagine-constructor" ></div>
<div class="img-fluid" id="imagine-model" ></div>

const imagineDataBox = document.getElementById('imagine-model')
const imagineConstructorDataBox = document.getElementById('imagine-constructor')

用于制造商徽标

imagineConstructorDataBox.innerHTML = ""
    $.ajax({
        type: 'GET',
        url: `imagine-constructor-json/${selectedConstructor}/`,
        success: function(response){
            console.log(response.data)
            const logo = response.data
            logo.map(item=>{
                const option = document.createElement('img')
                option.textContent = item.constructor_nume
                option.setAttribute('src', `media/${item.logo_constructor}`)
                option.setAttribute('alt', item.constructor_nume)
                option.setAttribute('style', 'max-height: 150px;')
                option.setAttribute('class', 'img-fluid')
                imagineConstructorDataBox.appendChild(option)
            })
        },
        error: function(error){
            console.log(error)
        },
    })

模型图片：

imagineDataBox.innerHTML = ""
    $.ajax({
        type: 'GET',
        url: `imagine-masina-json/${selectedModel}/`,
        success: function(response){
            console.log(response.data)
            const logo = response.data
            logo.map(item=>{
                const option = document.createElement('img')
                option.textContent = item.model_nume
                option.setAttribute('src', `media/${item.imagine_model}`)
                option.setAttribute('alt', item.model_nume)
                option.setAttribute('style', 'max-height: 200px;')
                imagineDataBox.appendChild(option)
            })
        },
        error: function(error){
            console.log(error)
        },
    })

我希望它对运行解决这个问题的其他人有用。

Django：如何根据表单中的选定选项在模板上显示来自 Django 数据库的图像？

Django: how can i display an image from the django database on a template based on an selected option from a form?

javascript

python

django

django-templates

django-views