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(max_length=150)
    images = models.ForeignKey(Image, null=True)

class Image(models.Model):
    img = models.ImageField(upload_to="photos/",null=True, blank=True)

and I am trying to display the images in my template however I cannot seem to get it to work. I have gone though countless stack overflow posts and haven't had any luck. In my template I have

{ for post in postings }
    <img src"{{ post.image.url }} #and many variations of this

however other seems to display the url. The url seems to always be blank. Any help would be greatly appreciated!

Prescriptive

try this - <img src="{{ post.images.img.url }}" ... > because your Posting model has 'images' named attribute of Image model. – Carbide

<img src="/{{post.images.img}}"/> Try this. I guess the problem is with the relative path. Append '/' to the path. – Kinch

Answer 1

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">

Fifine

what is static for in your urls.py? – Diestock

Answer 2

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

Tallbott

Answer 3

The template tag should be:

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

Unexpressed

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.

Friesen

Thanks, I've tried that but no luck. Will this still work if each postings has a foreignKey? This is a one-to-many correct? – Prescriptive

Answer 5

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/

Melmon