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

Posted 2023-02-23

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

【英文标题】：Django: how can i display an image from the django database on a template based on an selected option from a form?

【发布时间】：2021-12-05 10:48:05

【问题描述】：

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

到目前为止，我已经成功地将所选表单中的数据（MasinaSelectata 模型）带入并存储在数据库中，数据根据客户端的 ip 进行更新。

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

我尝试了几个变种，没有一个成功，我最后一次尝试是下面的。

型号：

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)

模板： 导航栏.html

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

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

【参考方案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)

网址.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)
        ,
    )

我希望它对遇到此问题的其他人有用。