3
respostas

[Bug] Imagem perdendoa qualidade

minha imagem perde a qualidade quando eu clico
Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Matricule-se agora e aproveite até 50% OFF

O maior desconto do ano para você evoluir com a maior escola de tecnologia

QUERO APROVEITAR
3 respostas

Olá Gustavo.
O problema esta na imagem e como ela é carregada.
Confere ai:

  1. Verifique se ao clicar a imagem original está sendo usada, e não a miniatura:
<img src="{{ image.thumbnail.url }}" onclick="openModal('{{ image.original.url }}')">
  1. Se estiver usando Pillow ou redimensionamento ao salvar, aumente a qualidade:
img.save(self.image.path, quality=95, optimize=True)
  1. Confirme que MEDIA_URL e MEDIA_ROOT estão corretos no settings.py:
MEDIA_URL = '/media/'
MEDIA_ROOT = BASE_DIR / 'media'
  1. No front-end, evite usar apenas zoom via CSS ou transform, carregue a versão de alta resolução:
function openModal(src) {
  const modalImg = document.getElementById("modal-img");
  modalImg.src = src.replace("thumbnail", "original");
}
  1. Se usar lightbox ou plugin similar, passe o caminho da imagem original:
<a href="{{ image.original.url }}" data-lightbox="galeria">
    <img src="{{ image.thumbnail.url }}">
</a>

Confere ai se alguma das opções acima se encaixa no seu problema.
Para lhe ajudar preciso do seu codigo as partes relacionadas a imagem.
Aguardo seu feedback.
Até...

calma, pode me explicar passo a passo do que fazer? no caso de quais dados você precisa

E ai Gustavo.
Tudo bem?
Acho que a resposta anterior não ajudou.
Vamos tentar mais uma vez.
Revise cada passo se está correto.

1. Configurar diretórios de mídia

No arquivo settings.py, verifique as seguintes linhas:

import os

MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

Isso define onde os arquivos de mídia (como imagens enviadas) serão armazenados e como serão acessados na URL.

2. Configurar as rotas (URLs)

No arquivo urls.py principal do projeto (geralmente o que está na mesma pasta de settings.py), verifique:

from django.conf import settings
from django.conf.urls.static import static
from django.urls import path, include

urlpatterns = [
    path('', include('app.urls')),  # substitua "app" pelo nome do seu app
]

if settings.DEBUG:
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

Isso faz o Django servir os arquivos de mídia durante o desenvolvimento.

3. Criar o campo de imagem no modelo

No seu models.py:

from django.db import models

class Produto(models.Model):
    nome = models.CharField(max_length=100)
    imagem = models.ImageField(upload_to='produtos/')  # pasta dentro de /media

    def __str__(self):
        return self.nome

Necessário instalar o Pillow para lidar com imagens:

pip install Pillow

4. Fazer a migração

python manage.py makemigrations
python manage.py migrate

5. Criar formulário e upload

Exemplo simples de formulário no forms.py:

from django import forms
from .models import Produto

class ProdutoForm(forms.ModelForm):
    class Meta:
        model = Produto
        fields = ['nome', 'imagem']

6. View para upload

No views.py:

from django.shortcuts import render, redirect
from .forms import ProdutoForm

def upload_imagem(request):
    if request.method == 'POST':
        form = ProdutoForm(request.POST, request.FILES)
        if form.is_valid():
            form.save()
            return redirect('lista_produtos')
    else:
        form = ProdutoForm()
    return render(request, 'upload.html', {'form': form})

7. Template para upload (upload.html)

<form method="post" enctype="multipart/form-data">
    {% csrf_token %}
    {{ form.as_p }}
    <button type="submit">Enviar</button>
</form>

8. Exibir a imagem no template (lista.html, por exemplo)

{% for produto in produtos %}
    <h3>{{ produto.nome }}</h3>
    <img src="{{ produto.imagem.url }}" alt="{{ produto.nome }}" width="200">
{% endfor %}

Resumo dos comandos principais

pip install Pillow
python manage.py makemigrations
python manage.py migrate
python manage.py runserver

Lembrando que o conteudo acima é apenas um exemplo e do indice 5 até o 8 são apenas exemplos.
O principal é rodar os comandos listados em resumo dentro do seu ambiente virtual e ver o resultado.
Se continuar com problemas avise.
Segue o projeto completo para comparar com o seu e ver se há diferenças:
https://github.com/alura-cursos/alura_space/tree/aula_5
Bons estudos.