CODEWITHSUNDEEP
pythondjangoimageupload
ClarkTheCoder
ClarkTheCoder

Reputation: 179

How to display image from model in Django

To be clear, I have tried researching this on my own but since I'm still very new to Django I am unable to understand the solutions here. I also have read the documentation and I don't understand what I'm doing wrong. I cannot get the images located in the "ad_pictures" directory to display in the HTML.

Here's my code:

settings.py

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

urls.py (project)

from django.conf.urls import url, include
from django.contrib import admin
from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^accounts/', include('accounts.urls')),
    url(r'^classifieds/', include('classifieds.urls')),

 ] +static(settings.MEDIA_URL, document_ROOT=settings.MEDIA_ROOT)

urls.py (classifieds app)

from django.conf.urls import url
from . import views

app_name = 'classifieds'

urlpatterns = [
    url(r'^create/', views.create, name='create'),
    url(r'^latestads/', views.latestads, name='latestads'),
]

models.py

class Post(models.Model):

    title = models.CharField(max_length=150)
    price = models.CharField(max_length=100)
    body = models.TextField()
    pub_date = models.DateTimeField(null=True)
    author = models.ForeignKey(User, null=True)
    category = models.CharField(max_length=150, null=True)
    picture = models.ImageField(upload_to='ad_pictures', default='')

latestads.html

            {% for post in posts.all %}
            <div class="advertisements">
              <div class="a-title">
                <h3><a href="">{{ post.title }}</a></h3>
              </div>
              <div class="a-image">
                <a href=""><img src="{{ post.picture.url }}"></a>
              </div>
              <div class="a-content">
                <p>{{ post.body }}</p>
              </div>
              <div class="a-date">
                <p>{{ post.pub_date }} by {{ post.author }}</p>
              </div>
            </div>
            <img src="{{ post.image.url }}">
            {% endfor %}

Picture of directory structure: here

Html output: here

I'm sure part of the problem is the "post.picture.url" in the HTML. Any insight is greatly appreciated.

Thanks

Upvotes: 2

Views: 4766

Answers (1)

Afsal Salim
Afsal Salim

Reputation: 486

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^accounts/', include('accounts.urls')),
    url(r'^classifieds/', include('classifieds.urls')),

 ] +static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

please change document_ROOT to document_root

Upvotes: 6

Related Questions