Menu
×
   ❮   
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

Django Adding Image file


Add an Image File

Adding images files in Django project is done the same way as adding css files or adding js files in Django:

Static files, like css, js, and images, goes in the static folder. If you do not have one, create it in the same location as you created the templates folder:

myworld
    manage.py
    myworld/
    members/
        templates/
        static/

Add a image file (.png, .jpg, .gif, etc.) in the static folder::

myworld
    manage.py
    myworld/
    members/
        templates/
        static/
            pineapple.jpg

Modify the Template

Now you have a image in the static folder. The next step will be to include this image in a HTML template:

Open the HTML file and add the following:

{% load static %}
<img src="{% static 'pineapple.jpg' %}">

Restart the server for the changes to take effect:

py manage.py runserver

Example

members/templates/template.html:

{% load static %}
<!DOCTYPE html>
<html>
<body>

<img src="{% static 'pineapple.jpg' %}">

</body>
</html>
Run Example »

Didn't Work?

Make sure that DEBUG = True in the settings.py file, otherwise the example will fail in development.

Set the DEBUG property to True:

my_tennis_club/settings.py:

.
.
# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True
.
.

Handling Static Files

When your website is in production, and open for everyone, static files are handled differently than they are in development.

You will learn how to deploy the website to production later in this tutorial, and you will learn how to handle static files in production then.


×

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail:
sales@w3schools.com

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail:
help@w3schools.com

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Copyright 1999-2024 by Refsnes Data. All Rights Reserved. W3Schools is Powered by W3.CSS.