'Django static file images not displayed on IBM Cloud Foundry

I've read some other threads, googled, and tried reading docs but can't find what I'm looking for. I am new to playing with Django, fyi. This same code runs alright on my local and also on pythonanywhere.com

My web app displays a list of 'interests', 'images', and a 'urls'. The 'image' is actually a path to the local image file. The app deploys fine to IBM Cloud Foundry and works, except that the images in static files do not display only the broken image icon displays.

When I deploy, I see in the logs the message "153 static files copied to '/tmp/app/static'" which leads me to believe the collectstatic ran without issue.

from models.py:

class Interest(models.Model):
    interest = models.CharField(max_length=100)
    **image = models.ImageField(upload_to='interest/images')**
    url = models.URLField(blank=True)

    def __str__(self):
        return self.interest

From the html template:

{% extends 'portfolio/base.html' %}

{% block about-class %} about-color-class {% endblock %}

{% block content %}

{% load static %}

<!-- Interests -->

<section class="interests">
    <div class="container">
        <div class="row">
            <h1>Some of my interests...</h1>
        </div>
        <div class="row-images">
            {% for interest in interests %}
            <div class="col-lg-1 col-md-1 col-xs-1">
                <a href="{{ interest.url }}"><**img src="{{ interest.image.url }}" alt=""**></a>
            </div>
            {% endfor %}
        </div>
    </div>
</section>

<!-- Interests End -->

From settings.py:

STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')

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

So, I'm not sure what's going on. Any advice is appreciated. Thanks.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source