1

Sou iniciante em Django e estou desenvolvendo um blog simples.


Eu sei que a configuração dos arquivos estáticos precisa ser diferente para o ambiente de desenvolvimento e produção, mas sempre acabo me embolando em entender como funciona visto que eu nunca fiz deploy de nenhuma aplicação web e não sei como o servidor lida com os arquivos.

Caso alguém tenha alguma indicação de leitura para que eu entenda melhor como isso funciona seria de grande ajuda.

Tendo isso em mente, estou desenvolvendo o blog em ambiente de desenvolvimento e me deparei com o seguinte problema:

Dentro do 'models' de um determinado aplicativo existe um campo FileField que é o responsável por lidar com a importação da imagem de cabeçalho da publicação no blog.

content.models.py

from django.db import models
from tinymce import models as tinymce_models


class Article(models.Model):
    titulo = models.CharField(max_length=200)
    photo = models.FileField(upload_to='static', null=True, blank=True) 
    autor = models.CharField(max_length=30)
    corpo = tinymce_models.HTMLField(null=True, blank=True) #Tinymce field
    data = models.DateField()
    tag = models.CharField(max_length=30)
    .
    .
    .

Esse arquivo é coletado em minha view:

content.views.py

def home (request):
menu = Article.objects.all()
lista_artigos = Article.objects.all() 
paginator = Paginator(lista_artigos, 2) 
trabalhos_feitos = Work.objects.all() 

page = request.GET.get('page')  
try:
    conteudo = paginator.page(page)
except PageNotAnInteger:
    conteudo = paginator.page(1)
except EmptyPage:
    conteudo = paginator.page(paginator.num_pages)

context = {'conteudo_artigo': conteudo, 'menu':menu,'trabalhos':trabalhos_feitos}
return render(request, 'base.html', context)

E passado para meu template:

base.html

{% for item in conteudo_artigo%}
{% if item.photo %}
    <img src="{{item.photo}}" class="img-responsive" alt="...">
{% endif %}

    <a id='titulo' href="/artigos/{{item.id}}">{{item.titulo}}</a>
    <h5 id ='autor'>{{item.autor}}</h5>
    <h5 id ='tag'>{{item.tag}}</h5>

    {% if item.corpo|length > 1000 %} 
        <p id = 'corpo_artigo'>{{item.corpo|truncatewords:200|safe}} </p> 
        <h5 id ='data'>{{item.data}}</h5>
        <button class="btn btn-default navbar-btn"> <a href="/artigos/{{item.id}}">Continue Lendo</a></button>
    {% else %}
        <p>{{item.corpo|safe}} </p>
        <h5 id ='data'>{{item.data}}</h5>
    {% endif%}      
 {% endfor %}

Até aqui tudo certo. A imagem (mesmo o FileField não sendo o ideal para lidar com imagens) aparece normalmente em meu layout.

inserir a descrição da imagem aqui

O problema é que eu tenho outra função em minha view que é responsavel por direcionar para uma pagina contendo apenas o artigo. Quando isso é feito, a imagem deixa de aparecer.

content.views.py

def artigos(request,id_pagina_artigo): 
menu = Article.objects.all() 
try:
    materia = Article.objects.get(id=id_pagina_artigo)
except ObjectDoesNotExist:
    #raise Http404
    return render(request, '404.html', {'menu':menu})

return render(request, 'artigo.html', {'teste': materia, 'menu':menu})

inserir a descrição da imagem aqui

Essa é a configuração do template para essa função da view:

{% extends "index.html"%}
{% load static %}
{% block artigo_full %}

<div class='row'>
     <div id='artigo' class='col-lg-12 col-md-12 col-sm-12'>
         {% if teste.photo %}
             <img src="{% static '{{teste.photo}}' %}" class="img-responsive" alt="...">
         {% endif %}
         <a id='titulo' href="/artigos/{{teste.id}}">{{teste.titulo}}</a>
         <h5 id ='autor'>{{teste.autor}}</h5>
         <h5 id ='tag'>{{teste.tag}}</h5>
         <p>{{teste.corpo|safe}} </p>
         <h5 id ='data'>{{teste.data}}</h5>
     </div>
 </div>

{% endblock %}

Sei que muito o que é mostrado no código nao é a meneira mais eficiente e tem muita coisa 'hardcoded', mas leve em consideração que sou iniciante e que minha intenção é montar a estrutura base e ir me aprofundando no código para melhorar sua sintaxe.

Por fim, minha url.py:

from content import views
from django.contrib import admin
from django.conf.urls import url , include

urlpatterns = [
    url(r'^$', views.home),
    url(r'^artigos/(?P<id_pagina_artigo>\d+)$', views.artigos),
    url(r'^portfolio/$', views.portfolio),
]

2 Respostas 2

1

Acredito que o problema seja a maneira que você está tentando renderizar o path do arquivo. Na listagem você faz assim:

<img src="{{item.photo}}" class="img-responsive" alt="...">

E na página de detail você faz assim:

<img src="{% static '{{teste.photo}}' %}" class="img-responsive" alt="...">

Tô um pouquinho enferrujado no Django, mas acho que ele não vai conseguir renderizar uma variável dentro de uma template tag. Então minha sugestão seria você padronizar o uso para a primeira maneira que você utilizou.

2
  • Quando eu padronizo para que fique igual a primeira opção a imagem ainda nao e mostrada e o seguinte erro é mostrado no terminal: Not Found: /artigos/static/imagem3_FcljUkP.jpg Ou seja , parece que sem usar o static ele tenta buscar o arquivo em uma outra pasta. Commented 5/10/2017 às 21:23
  • Ah sim, bem lembrado. Pra você servir arquivos "uploadados" pelo usuário, você tem que adicionar um hack no seu urls.py. Aí é aquela coisa que cê já deve ter visto: Django não foi feito pra servir arquivos, mas pra ambiente de desenvolvimento, tudo bem. Veja neste link como fazer.
    – mazulo
    Commented 5/10/2017 às 21:45
-1

No meu caso a imagem não estava aparecendo no ambiente de testes justamente por conta da maneira diferente que os objetos estáticos são tratados, por isso, precisei adicionar a seguinte linha em meu settings:

MEDIA_URL = '/media/'

Onde a pasta media está criada para armazenar arquivos de imagens como os seus e está na pasta da minha aplicação principal.

Depois disso foi incluída uma nova URL apenas para o ambiente de teste no arquivo urls.py como abaixo:

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

Essas duas programações solucionaram a apresentação das imagens nos meus testes.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .