1

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?

YCode
  • 1,192
  • 1
  • 12
  • 28

2 Answers2

1

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
YCode
  • 1,192
  • 1
  • 12
  • 28
0

The first img tag you had is the correct way of pulling static files from your static directory. Whitenoise simply helps serve images/media files on Heroku servers but it isn't needed for local development. To properly use static, however, you need to load static at the top of each template. Example:

<!-- template.html -->
{% extends 'base.html' %}
{% block content %}

{% load static %}

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

<!-- show dynamically -->
<img src="{{ item.image.url }}" alt="{{ item.name }}">

{% endblock %}

Note that the actual path to the image, images/hi.jpg, is in single quotes so as to not conflict with the outside double quotes

vladthelad
  • 165
  • 6
  • 1
    Thanks for trying, but I don't think you understood my question. The examples in my original post were taken from the Whitenoise docs. `{% load static %}` is on every template. – YCode Mar 19 '21 at 15:20
  • 1
    Ah, just saw your updated answer above. That is pretty unusual for Django static files to do that, the staticfiles directory is mainly for admin css/js and other files. To collect those files you would run `python manage.py collectstatic` but keep in mind it will fully flush out and recreate the directory with new files. One thing I do to change between `STATICFILES_DIRS` and `STATIC_ROOT` is by doing an `if DEBUG:` on `STATICFILES_DIRS` and else I direct to `STATIC_ROOT` – vladthelad Mar 19 '21 at 17:24
  • 1
    Yes, I noticed `python manage.py collectstatic` collected admin related files and left the media files untouched. Still, it's not clear to me the difference btw the paths (`STATIC_UR`L ) and `root` (`STATIC_URL`), and then `static` vs `staticfiles`. As if that wasn't confusing enough: After I cleared the static and media folders and made changes in settings, a `media` folder was created inside `staticfiles/media`. Question is why. – YCode Mar 19 '21 at 20:45