I'm not quite sure what's going on, but my images loaded fine on my local development server. However, once I deployed, the images will not load. I checked the URL and it seems to be correct. I'm not sure what's going on here.
base.py
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'
HTML
{% load wagtailcore_tags wagtailimages_tags %}
...
{% with post.main_image as main_image %}
{% if main_image %}{% image main_image fill-400x200 %}{% endif %}
{% endwith %}
Page Source for Element
<img alt="photo" src="/media/images/Lily.2e16d0ba.fill-400x200.jpg" width="400" height="201">
I'm pretty confused and I can't really find much about the topic. Am I the only one who's run in to this issue? Any help would be greatly appreciated.
During development (when you use ./manage.py runserver and have the DEBUG setting set to True), Django serves static files itself as a convenience. In production, it's up to you to configure your web server to serve static files from /media and /static: https://docs.djangoproject.com/en/1.10/howto/static-files/deployment/
This is for performance and security reasons - there's no point having static files served via Python code when there's already a web server properly tuned for that task.