Nginx, gunicorn, ubuntu 16.06 - uploaded images not displaying

Question

fellow humans

I have been on this issue for a couple days and would really appreciate some help. So I successfully deployed my app and everything works fine including css and the javascript except for this little thing which Im sure is just a little fix i am missing, resulting to my uploaded images not displaying even tho i see the "upload successful" page.

My image model

class Image(models.Model):
    user = models.ForeignKey(settings.AUTH_USER_MODEL,
                         related_name='images_created')
    title = models.CharField(max_length=2000)
    slug = models.SlugField(max_length=200,
                        blank=True)
    url = models.URLField()
    image = models.ImageField(upload_to='/home/kingiyk/stylplus/media/')
    description = models.TextField(blank=True, null=True)
    created = models.DateField(auto_now_add=True,
                                            db_index=True)
    users_like = models.ManyToManyField(settings.AUTH_USER_MODEL,
                                                related_name='images_liked', blank=True)

    tags = TaggableManager()

    class Meta:
        ordering = ('-created',)




    def __str__(self):
        return self.title


    def save(self, *args, **kwargs):
        if not self.slug:
            self.slug = slugify(self.title)
            super(Image, self).save(*args, **kwargs)

    def get_absolute_url(self):
        return reverse('images:detail', args=[self.id, self.slug])

my nginx conf

server {
    listen 80;
    server_name 67.207.87.22;

    location = /favicon.ico { access_log off; log_not_found off;

    }

    location /static/ {
        alias /home/kingiyk/stylplus/static;
    }

    location /media/ {
        alias /home/kingiyk/stylplus/media;
    }

    location / {
        include proxy_params;
        proxy_pass http://unix:/home/kingiyk/stylplus/stylplus.sock;
    }
}

my uploaded images are located in /home/kingiyk/stylplus/media/ so atleast i know they were saved.

here is my settings file:

BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))





DEBUG = False

ALLOWED_HOSTS = ['67.207.87.22', 'styllplus.com', 'www.styllplus.com']



ROOT_URLCONF = 'stylplus.urls'



WSGI_APPLICATION = 'stylplus.wsgi.application'









STATIC_URL = '/static/'
STATIC_ROOT = '/home/kingiyk/stylplus/static/'




from django.core.urlresolvers import reverse_lazy

LOGIN_REDIRECT_URL = reverse_lazy('dashboard')
LOGIN_URL = reverse_lazy('login')
LOGOUT_URL = reverse_lazy('logout')

EMAIL_BACKEND = 'django.core.mail.backends.console.EmailBackend'



ABSOLUTE_URL_OVERRIDES = {
    'auth.user': lambda u: reverse_lazy('user_detail', args=[u.username])
    }

SITE_ID = 1


DJANGO_MESSAGES_NOTIFY = False

and here is my html upload page which is supposed to display the image

{% extends "base.html" %}

{% load staticfiles %}


{% block title %}{{ user.username }}{% endblock %}
{% block content %}
{% load thumbnail %}
<div id="lonely">
 {% thumbnail image.user.profile.photo "40" as in %}
    <a href="{{ image.user.get_absolute_url }}">
        <img src="{{ in.url }}" class="gametime"></a>
        {% endthumbnail %}
<a href="{{ image.user.get_absolute_url }}" class="time">{{ image.user.username }}</a>

<div id="details">
{% thumbnail image.image "551" as im %}

    <a href="{{ image.image.url }}">
        <img src="{{ im.url }}" alt="{{ image.title }}"class="image-detail">
    </a>

{% endthumbnail %}

{% with total_likes=image.users_like.count users_like=image.users_like.all %}
    <div class="image-info">
     <div>
        <span class="count">
            <span class="total">{{ total_likes }}</span>
            like{{ total_likes|pluralize }}
        </span>
        {% with comments.count as total_comments %}

{{ total_comments }} comment{{ total_comments|pluralize }}

{% endwith %}

{% if request.user not in users_like %} Like {% else %} Unlike {% endif %}

    </div>
    {{ image.title|linebreaks }}
</div>

<div id="my-chart"></div>
<div class="image-likes">
    Liked by
    {% for user in image.users_like.all %}
        <div>
            {% thumbnail user.profile.photo "30" as in %}
            <img src="{{ in.url }}" class="gametime">
            {% endthumbnail %}
            <a href="{{ user.get_absolute_url }}">{{ user.username }}

        </div>
    {% empty %}

    {% endfor %}
</div>
{% endwith %}




{% for comment in comments %}
<div class="image-info">
<p class="info">


    <a href="{{ comment.user.get_absolute_url }}" class="mine">{{      

     comment.user }}</a> {{ comment.comment }}

</p>

Every othetr thing works just fine, except for the images not being visible I can't see what the bug is. I'd appreciate your time

Answer 1

you need to add media url and root to tell django where to look for the media if a media file is going to be displayed

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

add this 2 lines in the settings.py

adn if you have added STATIC_URL and STATIC_ROOT in the main urls.py then add MEDIA_URL and MEDIA_ROOT too as static.

urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
urlpatterns += static(settings.MEDIA_URL , document_root=settings.MEDIA_ROOT)

add these lines to your urls.py