2

I've been facing this problem, where i get error telling me image not found, and i get cracked picture on the website. I will attach the code including the directory and also the terminal where I get the error.

enter image description here

Shahin Mammadov
  • 37
  • 2
  • 7

3 Answers3

4

In a web application, apart from business logic and data handling, we also need to handle and manage static resources like CSS, JavaScript, images etc. It is important to manage these resources so that it does not affect our application performance. Django deals with it very efficiently and provides a convenient manner to use resources.

To serve static files follow below procedure. Add following into settings.py

settings.py

#STATIC_URL: specifies what to append when you call `{% static %}` as template tag. 
STATIC_URL = '/static/'

#STATIC_ROOT: specifies where exactly you yourself will put your static files
STATIC_ROOT = os.path.join(BASE_DIR, 'staticroot')

#STATICFILES_DIRS: it tells Django where to look for static files while 
#serving a request. 
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static'),
]

After that create a staticroot directory at your root of your project. Then put all your javascript,css,images over there and run following command.

python manage.py collectstatic

This command will collect all the files into a /static/ folder.

Now to serve your static files during development add following to your main urls.py

urls.py

from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    # Your URL configs
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

After that you can use your static files wherever you want. For ex: You need to add an background image to your templates, you should add the following code

template.html

<!--{% load static %} should be always top of your template file. It tells 
Django to load your static files inside template. -->
{% load static %}

<!--{% static 'resource_url' %} means STATIC_URL+'resource_url'. (STATIC_URL 
defined inside your settings.py) -->
<img src="{% static "my_app/example.jpg" %}" alt="My image">

This should solve your problem.

k33da_the_bug
  • 812
  • 8
  • 16
1

Add static folder to your url and it will work You also need to understand Python manage.py collectstatic For production level delivery of static files under settings py

Jaskaran Singh
  • 531
  • 3
  • 14
  • Also one more question, to style the image from css file, is it any different than normal? Because I am trying now and it does not change anything. – Shahin Mammadov Apr 29 '20 at 14:41
  • Make sure you add the class to img tag. And css is also under static folder which is being loaded in your base html so that css is available at runtime – Jaskaran Singh Apr 29 '20 at 14:43
  • ` model` this is the img tag and this is the css model21 class but I see no changes yet. .model21{... } – Shahin Mammadov Apr 29 '20 at 14:48
  • Can you verify in sources of your browser if css file is being delivered if yes try to clear cache and reload css – Jaskaran Singh Apr 29 '20 at 14:55
1

That's because with Django you use a server, and it needs to know where to look for the files and where to serve them.

It will by default look into a folder called "static", so you should make a directory called "static" and put your images there

Then define a path where Django will serve these files in settings.py:

STATIC_URL = '/static/'

Whenever you need to add an image to your templates, you should add the following code:

{% load static %}

<img src="{% static "my_app/example.jpg" %}" alt="My image">

the {% load static %} only needs to be invoked once, at the top of your template file.

https://django.readthedocs.io/en/2.2.x/howto/static-files/

ClicusBuckis
  • 31
  • 2