Django is not loading my static files. I'm trying to load an image from the static folder, but it doesn't work.
file.html
<body>
{% load static %}
<img src="{% static "products/logo.jpg" %}" alt="My image">
</body>
structure
app
|_______products
|_________templates
|_________file.html
|_________models.py
|_________ ...
|______static
|_________products
|_________logo.jpg
settings
...
INSTALLED_APPS = [
...
'django.contrib.staticfiles',
...
]
...
STATIC_URL = '/static/'
You need to put this in your settings.py file:
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]
<!DOCTYPE html>
<html>
<head>
{% load static %}
</head>
<body>
<img src="{% static "products/logo.jpg" %}" alt="My image">
</body>
</html>
settings:
STATIC_DIR = os.path.join(BASE_DIR, 'static')
STATIC_URL = '/static/'
STATICFILES_DIRS = [STATIC_DIR, ]
Related
I have facing this issue when i am trying to give favicon to my admin portal it was working completely fine till DEBUG was True. When I switch to DEBUG=False it start showing me this error which i mention in tittle.
here is my code :
templates/admin/base_site.html
{% extends "admin/base_site.html" %}
{% load static %}
{% block extrahead %}
<link rel="shortcut icon" href="{% static '/img/favicon.ico' %}" />
{% endblock %}
settings.py
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static')
]
MEDIA_ROOT = os.path.join(BASE_DIR, 'media/')
MEDIA_URL = '/media/'
In debug it worked smoothly now it shows me error 400 in browser and in terminal:
raise SuspiciousFileOperation( django.core.exceptions.SuspiciousFileOperation: The joined path (D:\img\favicon.ico) is located outside of the base path component (D:\Social_login\staticfiles)
{% extends "admin/base_site.html" %}
{% load static %}
{% block extrahead %}
<link rel="shortcut icon" href="{% static 'img/favicon.ico' %}" />
{% endblock %}
it solved my problem just / was problem and i spend 8 hours for solution now i am laughing at my self.
I'm learning django. It was working in the beginning of my project, but now imgs from static just dont appear.
I've try to run collecstatic, work with STATIC_ROOT, other images and so on.
Settings.py
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static')
]
MEDIA_URL = '/upload/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'upload')
Home.html
{% load static %}
<img scr="{% static 'img/cart-icon.png' %}">
Files dir
{% load static %}
<img src="{% static 'img/cart-icon.png' %}">
src not scr
I'm trying to load CSS and JS files in my Django templates but it's not working. I could load images succesfully.
My settings:
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
STATIC_URL = '/static/'
STATIC_DIR = os.path.join(BASE_DIR, 'static')
STATICFILES_DIRS = (
STATIC_DIR,
)
My urls.py:
urlpatterns = [
.
.
.
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT) + \
static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
My template:
{% extends 'base.html' %}
{% load static %}
{% block content %}
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<link href="{% static 'card-js.min.css' %}" rel="stylesheet" type="text/css" />
<script src="{% static 'card-js.min.js' %}" type="text/javascript"></script>
<img src="{% static 'bag1.png' %}" width="25px">
My file structure:
dma
- account
- cart
- dma
- home
- media
- payment
- static
- - bag1.png
- - card-js.min.css
- - card-js.min.js
The image 'bag1.png' is loaded correctly but not the 'css' and 'js' files.
Any help?
Thank you!
html content but i think this problem happened when you use your link tag and js tag in body you should do this :
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
{% block head %} <!-- for css links --> {% endblock %}
</head>
<body>
{% block body %}<!-- for body content -->{% endblock %}
</body>
{% block js %}<!-- for js links -->{% endblock %}
</html>
and don't remember rel="" for your links
static folder path correct and it was all working before migration.
index.html
{%load staticfiles%}
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="{% static "css/mycss.css"%}"/>
<title>My first Django App</title>
</head>
<body>
<h1>{{somthin}}</h1>
<img src="{% static 'images/zoro.jpg'%}" alt="Oops!No Image">
</body>
</html>
after python manage.py runserver in terminal static files are showing 404 error.
make sure all these configuration you have in your settings.py
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "static"),
]
STATIC_ROOT = os.path.join(os.path.dirname(BASE_DIR), "static")
MEDIA_URL = "/media/"
MEDIA_ROOT = os.path.join(os.path.dirname(BASE_DIR), "media")
and in main urls.py
if settings.DEBUG:
urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
and use {% load static %} tag in templates, also if you use double quote outside curly brackets, use single quote inside
<link rel="stylesheet" href="{% static 'css/mycss.css' %}"/>
I'm trying to use django-compressor for my project. So far in my development environment, when I run python manage.py compress I been get this error CommandError: An error occurred during rendering D:path/to/a/template.html: Invalid class path 'css'
I have lots of template files spread across many apps. The error pops up randomly, pointing to a different template each time I run python manage.py compress.
I have also tried first running python manage.py collectstatic, but to no avail and nothing in the docs seem to mention this error
OS: Windows 10, Django==2.0.5, django-compressor==2.2
Relevant settings.py section below
DEBUG = True
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
STATICFILES_DIRS = (os.path.join(BASE_DIR, 'static'),)
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'
COMPRESS_ROOT = STATIC_ROOT
COMPRESS_URL = STATIC_URL
COMPRESS_PARSER = 'compressor.parser.HtmlParser'
COMPRESS_ENABLED = True
COMPRESS_OFFLINE = True
COMPRESS_OFFLINE_MANIFEST = 'compressor_manifest.json'
COMPRESS_CSS_FILTERS = {
'css': ['compressor.filters.css_default.CssAbsoluteFilter'],
'js': ['compressor.filters.jsmin.JSMinFilter']
}
COMPRESS_PRECOMPILERS = (
('text/x-scss', 'django_libsass.SassCompiler'),
)
STATICFILES_FINDERS = (
'django.contrib.staticfiles.finders.FileSystemFinder',
'django.contrib.staticfiles.finders.AppDirectoriesFinder',
'compressor.finders.CompressorFinder',
)
Inside the <head></head> tag of my project's base.html template I have
{% load compress %}
{% load staticfiles %}
{% load static %}
{% compress css file %}
<link rel="stylesheet" href="{% static 'css/fname.css' %}">
{% endcompress %}
{% compress js file %}
<script type="text/javascript" src="{% static 'admin/js/vendor/jquery/jquery.js' %}"></script>
<script type="text/javascript" src="{% static 'js/fname.js' %}"></script>
{% endcompress %}
You must define COMPRESS_FILTERS instead of COMPRESS_CSS_FILTERS as the latter is only a backwards-compatible alias for the css key of the former. That is, your configuration should read:
COMPRESS_FILTERS = {
'css': ['compressor.filters.css_default.CssAbsoluteFilter'],
'js': ['compressor.filters.jsmin.JSMinFilter']
}