Display images in Django

Question

I have a django app which allows users to submit an image with it. Right now my model looks like

class Posting(models.Model):
    title = models.CharField(m         


        

Answer 1

It looks like you may be trying to follow a video tutorial series by Corey Schaefer. If so, my suggestion won't help, but if not, Corey Schaefer has a video that covers exactly what you're trying to do at https://youtu.be/FdVuKt_iuSI?list=PL-osiE80TeTtoQCKZ03TU5fNfx2UY6U4p.

You have to set quite a number of settings and override some defaults. The django documentation has two ways of doing it, one for development on localhost and another for production: https://docs.djangoproject.com/en/2.2/howto/static-files/

Answer 2

This is how i got it working.

settings.py

import os
BASE_DIR = os.path.dirname(os.path.dirname(__file__))
STATIC_URL = '/static/'

STATICFILES_DIRS = (
    os.path.join(BASE_DIR, "static"),
)

MEDIA_ROOT = (
BASE_DIR
)


MEDIA_URL = '/media/'

models.py ...

image = models.ImageField(upload_to='img')

urls.py(project's)

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

template (.html)

<img src="{{ post.image.url }}" alt="img">

Answer 3

The template tag should be:

<img src="{{ post.images.img.url }}" ... >

Answer 4

You should expect something akin to:

{% for post in postings %}
  <img src="{{ post.image.url }}">
{% endfor %}

There are a couple of caveats here --

• Images are served as a file, whatever is serving your application (runserver, nginx, apache, etc.) needs to have the ability to route that file.
• You must ensure you are building the context for the template engine to use. It will silently fail on values that it cannot find in context.

Answer 5

Do something like this. This code is working in my app.

views.py:

def list(request):
  images = Image.objects.all()
  return render(request, "list.html", {'images': images})

list.html:

{% for i in images %}
    <img src="{{ i.image.url }}" width="500px"/>
{% endfor %}