[SOLVED] How to write dynamic (Django) URLs for serving images using Whitenoise on Heroku?

How to write dynamic (Django) URLs for serving images using Whitenoise on Heroku?

I followed this answer here and read the tips here about serving static images. But I'm baffled: The official Whitenoise docs said to write the URLs this way:

<img src="{% static "images/hi.jpg" %}" alt="Hi!" />

And NOT this way:

<!-- DON'T WRITE THIS -->
<img src="/static/images/hi.jpg" alt="Hi!" />

But if I were to use a dynamic URL, such as src="{{recipe.image.url}}", how do I do it?

Solution

I fixed the issue, but I don't understand why. So if anyone can explain it, I'll accept that answer. I have two root folders,static and staticfiles. Each had their own folders images and media. I removed all the existing images, made changes to the code (see below), and re-uploaded the images--and viola! It worked--and worked on Heroku.

STATIC_URL = '/static/'  # Didn't work
STATIC_URL = '/staticfiles/'  # Yes, worked

STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
STATIC_TMP = os.path.join(BASE_DIR, 'static')
STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'static'),
)
STATICFILES_STORAGE = 'whitenoise.storage.CompressedManifestStaticFilesStorage'



MEDIA_URL = '/media/'     # Didn't work
MEDIA_URL = '/staticfiles/media/' # Yes, worked

MEDIA_ROOT = os.path.join(BASE_DIR, 'media')     # Didn't work
MEDIA_ROOT = os.path.join(BASE_DIR, 'staticfiles/media/')     # Yes, worked