0

I store blogs posts as HTML so that I can custom format them. Using Django framework, I load the blog post HTML from an database into a content block of a subclassed template. I would like have an image in the blog post. How do I format the image src to load an image that is stored in my static folder.

The example that the Django tutorial (https://docs.djangoproject.com/en/2.1/intro/tutorial06/) gives:

<img src="{% static assets/img/some_img.jpg %}" />

does not work inside a content block. But, I've been successfully using the following syntax, which I found from here (django 1.5 - How to use variables inside static tag) hard coded in template pages:

<img src="{% with assets/img/some_img.jpg as img_url %}{% static img_url %}{% endwith %}" />

Here is a generic example of my setup:

Database Record

ID=1 Title="Blog Title" Content="<p><img src="{% with assets/img/some_img.jpg as img_url %}{% static img_url %}{% endwith %}" /></p>"

base_template.html

<html>
<body>
{% block content %}{% endblock %}
</body>
</html>

blogpost.html

{% extends 'base_template.html' %}
{% block content %}
{{database_record.Content}}
{% endblock %}

Expected Result:

<html>
<body>
<p><img src="/static/assets/img/some_img.jpg" /></p>
</body>
</html>

Actual Result:

<html>
<body>
<p><img src="{% with assets/img/some_img.jpg as img_url %}{% static img_url %}{% endwith %}" /></p>
</body>
</html>

The problem is that neither of my attempts to load static image URLs work when the HTML is loaded from a database. The tags are displayed in rendered HTML just as they are seen above. The framework must load content from the database after it converts the curly bracket tags.

How can I link to static images from HTML that gets loaded from a database?

Kenneth Huebsch
  • 1
  • 1
  • 2
  • Which part of the html are you loading from database, the whole img line? Can you add an example with current and expected behavior? – gdef_ Apr 01 '19 at 12:17
  • I edited my post to show my setup as well as expected and actual behavior. – Kenneth Huebsch Apr 01 '19 at 19:42
  • Have you tried using the `safe` filter? Like `{{database_record.Content | safe}}` – gdef_ Apr 02 '19 at 00:08
  • yes I am using the safe filter, the html from the database is correctly inserted into the template. The image doesn't show up, though, because the src isn't converted to an actual URL. – Kenneth Huebsch Apr 02 '19 at 02:36

1 Answers1

0

Responding to my own question...

Background

After reading more of the Django static file documentation, I've learned that images should not be stored in the static folder. They should be stored in the media folder.

In a production environment, Django encourages developers to let the web server (Apache/Nginx/etc) serve the static files. So the web server will have a rule that any URLs with '/media' or '/static' will be served from a file on the disk and the request won't be forwarded to the application server. For example, example.com/media/some-img.jpg will be recognized by the web server and some-img.jpg will be served by the webserver directly.

In a development environment, there probably isn't a web server running, so Django allows you to use the MEDIA_URL and STATIC_URL settings to specify folders in your Django project directory that you will be storing static files to serve. Here's a stack overflow answer that goes into more depth on accessing the media folder in Django. Static files (which are usually css and js files) are app specific and can be stored within the specific app's directory structure and can be accessed with the macro that I have been using:

{% static assets/css/style.jpg %}

But, static files cannot be accessed through the hard coded url: localhost:port/static/assets/css/style.jpg. You must use the macro.

Media files are treated differently. The Django framework allows you to specify a MEDIA_URL setting and store all of your media files in there. The framework then allows you to access those files with hardcoded URLs like: localhost:port/media/some_img.jpg.

Use a better architecture

How can I link to images in my static folder from HTML that I load from a database using Django?

If you store your images in the media folder, you will be able to use image url paths without macros in the HTML that you store in your database. For example:

<img src="/media/some_img.jpg" />

The image tag above (stored in a DB, or not) will work if the media folder is setup correctly in settings.py

Question still isn't answered, technically

First and foremost, it is important to acknowledge that I am wrong to be trying to serve images out of the static folder, when I should be using the media folder. That being said, I'm not going to close the question as answered because there is still validity to my question in a more general sense. Lets say I wanted to specify the path to a CSS file in HTML loaded from a database? I still don't know how to do that. The following question is still unanswered:

How can I serve static files in HTML loaded from a database?

Kenneth Huebsch
  • 1
  • 1
  • 2