Django: как я могу отобразить изображение из базы данных django в шаблоне на основе выбранного параметра в форме?

#javascript #python #django #django-views #django-templates

Вопрос:

Я новичок в django, и в течение нескольких недель я пытался сопоставить выбранный пользователем вариант в форме с данными в моей базе данных, чтобы отобразить логотип выбранной марки и изображение модели автомобиля в шаблоне.

До сих пор мне удавалось вносить и хранить данные из выбранной формы в базе данных (модель MasinaSelectata), данные обновляются в соответствии с IP-адресом клиента.

Теперь мне нужно использовать данные, хранящиеся в (модели MasinaSelectata), и перечислить логотип бренда в (модели конструктора) и изображение модели в (модели модели). Чего я не могу сделать из-за отсутствия опыта и знаний.

Я перепробовал несколько вариантов, ни один из них не удался, моя последняя попытка приведена ниже.

Модели:

 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 и ТАК ДАЛЕЕ, но, похоже, не нашел решения.
Я уверен, что мне чего-то не хватает, поэтому, пожалуйста, помогите мне.

Ответ №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)
        },
    })
 

Я надеюсь, что это будет полезно для кого-то еще, кто столкнется с этой проблемой.