Django：无法在模板中呈现上传的图像

Question

I've created a model that accepts any kind of file using FileField() in my model.

I've uploaded correctly some files and saved the reference in the db, as I can see in the admin interface, and in the folder "media".

However, cannot render this images in the template. I need to render it so my users will be able to download them to their computer.

These are the paths to my images:

media/imagenes/468x60.jpg #relative path

/home/ogonzales/Escritorio/web_proyects/gallito/media/imagenes/468x60.jpg #full path

Project structure

gallito (Django project folder)
   |_gallito
   |_main_app
             |_static
             |_templates
                        |_main_app
                                  |_pedidos.html

   |_media
          |_imagenes
                    |_468x60.jpg
                    |_728x90.jpg
   |_templates
                |_registration
                              |_login.html
                |_base.html

models.py :

class TamaniosCantidades(models.Model):
    TAMANIOS = (('2x2', '2" x 2"',), ('3x3', '3" x 3"',),
               ('4x4', '4" x 4"',), ('5x5', '5" x 5"',))

    CANTIDADES = (('50', '50',), ('100', '100',),
                ('150', '150',))


    tamanios = models.CharField(max_length=10, choices=TAMANIOS)
    cantidades = models.CharField(max_length=10, choices=CANTIDADES)
    imagenes = models.FileField(upload_to='imagenes/')
    uploaded_at = models.DateTimeField(auto_now_add=True)

forms.py:

class TamaniosCantidadesForm(forms.ModelForm):
    tamanios = forms.ChoiceField(choices=TAMANIOS, widget=forms.RadioSelect(), label='Selecciona un tamaño')
    cantidades = forms.ChoiceField(choices=CANTIDADES, widget=forms.RadioSelect(), label='Selecciona la cantidad')
    class Meta:
        model = TamaniosCantidades
        # fields = ['tamanios', 'cantidades',]
        fields = ['tamanios', 'cantidades', 'imagenes']

views.py:

def pedidos(request):
    pedidos = TamaniosCantidades.objects.all()
    return render(request, 'main_app/pedidos.html', {'pedidos': pedidos})

urls.py:

urlpatterns = [
    path('', views.index),
    path('productos/', views.productos),
    path('productos/die-cut-stickers', views.die_cut, name='die-cut-stickers'),
    path('post_url/', views.post_treasure, name='post_treasure'),
    path('post_url_tamanioscantidades/', views.post_tamanioscantidades, name='post_tamanioscantidades'),
    path('pedidos/', views.pedidos),
    # path('login/', views.login_view, name='login'),
    # path('logout/', views.logout, {'next_page': settings.LOGOUT_REDIRECT_URL}, name='logout'),
]

HTML:

<div>

        <p>Mi Imagen</p>
        <img src="/home/ogonzales/Escritorio/web_proyects/gallito/media/imagenes/468x60.jpg">


         {% for pedido in pedidos %}

            <p> {{ pedido.imagenes }}</p>
            <img src="{{ pedido.imagenes.url }}" alt="Smiley">

         {% endfor %}

</div>

UPDATE 1:

STATIC_URL = '/static/'

STATIC_ROOT = os.path.join(BASE_DIR, 'static')

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

UPDATE 2:

this is the rendered html

<p> imagenes/728x90.jpg</p>
<img src="/media/imagenes/728x90.jpg" alt="Smiley">



<p> imagenes/468x60.jpg</p>
<img src="/media/imagenes/468x60.jpg" alt="Smiley">

Answer 1

Try adding the following snippet in your URLs.py if you haven't done so:

from django.conf import settings
from django.conf.urls.static import static

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

This should enable your media to work within your browser while in development.