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

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

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

Теперь мне нужно использовать данные, хранящиеся в модели (MasinaSelectata) и перечислить логотип бренда в модели (Constructor) и изображение модели в модели (Model 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)

Шаблоны: 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, но, похоже, не нашел решения. Я уверен, что я что-то упускаю, поэтому, пожалуйста, помогите мне.

Наконец-то мне удалось найти решение:

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)
        },
    })

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

Вернуться на верх