CODEWITHSUNDEEP
pythondjangodjango-templatesmediadjango-settings
Programmingjoe
Programmingjoe

Reputation: 2249

Django - Image from MEDIA_URL not showing up on template?

So I have read a number of stack overflow answers on this matter but none of them can seem to solve my problem. I have setup a MEDIA_ROOT, MEDIA_URL, STATIC_ROOT, and STATIC_URL but for some reason images in my media_url are not showing up on my template while images from my static_url are.

My code is below as well as a further explanation.

Settings.py

STATICFILES_DIRS = (
    ('/static/',
    '/home/joe/Documents/exchange/Texchange/textchange/static',),
    ('/media/',
    '/home/joe/Documents/exchange/Texchange/textchange/media/',),
)

MEDIA_ROOT = '/home/joe/Documents/exchange/Texchange/textchange/media/'

MEDIA_URL = '/media/'

STATIC_ROOT = '/home/joe/Documents/exchange/Texchange/textchange/'

STATIC_URL = '/static/'

Models.py

class Posting(models.Model):
    textbook = models.ForeignKey(Textbook)
    condition = models.CharField(max_length = 200)
    price = models.DecimalField(max_digits=5, decimal_places=2)
    user = models.ForeignKey(User)
    image = models.ImageField(upload_to='postingpics/%Y/%m/%d', default="../../static/textchange/nophoto.jpg")
    post_date = models.DateTimeField('date_posted')

    def __str__(self):
        return str(self.textbook)

    def was_posted_recently(self):
        return self.post_date >= timezone.now() - datetime.timedelta(days=1)
    was_posted_recently.admin_order_field = 'post_date'
    was_posted_recently.boolean = True
    was_posted_recently.short_description = 'Posted recently'

Template.html

<div class="row marketing">
      <div class="col-lg-6">
        <h3>Textbook Info</h3>
          <p><strong>Textbook: </strong>{{ posting.textbook.textbook_name }}</p>
          <p><strong>Condition: </strong>{{ posting.condition }}</p>
          <p><strong>Price: </strong>{{ posting.price }}</p>
          <p><strong>Class: </strong>{{ posting.textbook.class_name }}</p>
          <p><strong>ISBN: </strong>{{ posting.textbook.isbn }}</p>
          <p><strong>Author: </strong>{{ posting.textbook.author }}</p>
        <h3>Contact Info</h3>
          <p><strong>User: </strong>{{ posting.user.username }}</p>
          <p>Button to contact</p>


      </div>

      <div class="col-lg-6">
        {% block content %}
          <img src="{{ posting.image.url }}">
          <p>{{ posting.image.url }}</p>
        {% endblock %}
      </div>
    </div>

So as you can see if I don't upload an image for a posting it goes to a default image which is stored in static/textchange. This image will show up on the template. If I do upload an image the image will not show up on the template. In my template.html I have the text {{ posting.image.url }} in paragraph tags to see what the url for the different images look like.

When the default image in static/textchange is being used the url is: /../static/textchange/nophoto.jpg and the image shows up fine.

When I try and display an uploaded image in to the template the url is: /media/postingpics/2015/09/20/Star-Wars-Sith-Code-Wallpaper-2_dlPszgQ.jpg and no image shows up...

I find it weird how the static image has the /../ in front of static but I don't know why that's showing up just for the image from the static folder.

Any help would be appreciated.

Upvotes: 0

Views: 3872

Answers (1)

mindcruzer
mindcruzer

Reputation: 844

MEDIA_URL is not served automatically by Django, you have to set this up manually. https://docs.djangoproject.com/en/1.8/howto/static-files/#serving-files-uploaded-by-a-user-during-development

Also, your settings for your static and media files are odd:

  • Your MEDIA_ROOT is inside your STATIC_ROOT. Why?
  • Your STATICFILES_DIRS are inside your STATIC_ROOT. This doesn't really make any sense. STATICFILES_DIRS are supposed to be collected into your STATIC_ROOT.
  • Your MEDIA_ROOT is set up as a static files directory in STATICFILES_DIRS. Media files are by definition not static files. Remove this.

It looks like you want something more like this:

STATICFILES_DIRS = (
    '/home/joe/Documents/exchange/Texchange/textchange/static',
)

MEDIA_ROOT = '/home/joe/Documents/exchange/Texchange/textchange/media/'

MEDIA_URL = '/media/'

STATIC_ROOT = '/home/joe/Documents/exchange/Texchange/textchange/static_root/'

STATIC_URL = '/static/'

Assuming Texchange/textchange is your project root.

Upvotes: 2

Related Questions