Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

265
Vistas
Django: ¿cómo puedo mostrar una imagen de la base de datos de Django en una plantilla basada en una opción seleccionada de un formulario?

Soy un principiante con django y he estado luchando durante algunas semanas para correlacionar la opción seleccionada por un usuario en un formulario con los datos en mi base de datos para enumerar el logotipo de la marca seleccionada y la imagen del modelo de automóvil en la plantilla.

Hasta ahora he logrado traer y almacenar los datos del formulario seleccionado en la base de datos (modelo MasinaSelectata), los datos se actualizan según la ip del cliente.

Ahora necesito usar los datos almacenados en el (modelo MasinaSelectata) y enumerar el logotipo de la marca en el (modelo Constructor) y la imagen del modelo en el (modelo Modelo). Cosa que no logro hacer por falta de experiencia y conocimiento.

Probé varias variantes, ninguna tuvo éxito, mi último intento es el siguiente.

Modelos:

 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)

Vistas.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)

Plantillas: 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>

Investigué la documentación de django, google, youtube y SO, pero parece que no he encontrado una solución. Estoy seguro de que es algo que me estoy perdiendo, así que por favor ayúdenme.

about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

Finalmente logré encontrar una solución:

Vistas.py:

para mostrar el logotipo del fabricante seleccionado

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

para mostrar la imagen del modelo seleccionado

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

Utilicé un script para correlacionar los datos de la base de datos con las elecciones realizadas por el cliente y mostrar las imágenes correspondientes a las selecciones. Para mí fue más fácil de esta manera.

Plantillas: 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')

para el logotipo del fabricante

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

para la imagen del modelo:

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

Espero que sea útil para alguien más que se encuentre con este problema.

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda