I have following settings for static files
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static_my_proj'),
]
STATIC_ROOT = os.path.join(BASE_DIR, 'static_cdn', 'static_root')
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'static_cdn', 'media_root')
In the css file I do this
#mydiv{
background-image: url('/img/myimg.png');
}
And my directory structure
project root
- static_my_proj
- css
- img
- js
I can see from network tab that it looks for the image in static/css/img/myimg.png. However, if I do this then it works. How can I make it without using ../ at the beginning?
#mydiv{
background-image: url('../img/myimg.png');
}
You better use {% static 'img/myimg.png %}. Hardcoded paths aren't good, because if you change your static folder, you would have to change all your code. You can't use static in your css files, but in your templates. Your code would look like this:
yourHTML.html:
{% load staticfiles %}
<div id="mydiv" style="background-image: url({% static 'img/myimg.png' %})">
</div>
Related
I've added the neccessary elements to the URLs.py.
The image is NOT stored in the database, it's just a background image.
The source of the img folder is 'storiesapp/static/storiesapp/img'
Settings.py (i've been trying different things as shown)
STATIC_URL = '/storiesapp/static/storiesapp/'
STATIC_ROOT = os.path.join(BASE_DIR, "/static/")
STATICFILES_DIRS = [
"/storiesapp/static/storiesapp/img/",
"/static/storiesapp/img/",
"/storiesapp/img/",
"/img/",
]
STATICFILES_FINDERS =[
'django.contrib.staticfiles.finders.FileSystemFinder',
'django.contrib.staticfiles.finders.AppDirectoriesFinder',
]
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
# full path where all images are stored - os.path will create the directory regardless of the operating system
MEDIA_URL = '/media/'
#
.URLs.py
from django.conf import settings
from django.conf.urls.static import static
...
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
.
I'm trying all of the following
<link rel="apple-touch-icon" sizes="76x76" href="./assets/img/image.png">
<img src="static/storiesapp/img/image.png">
<img class='img-responsive' src="{{ MEDIA.URL }}{{ image.png }}" />
The answer is "<img src="{% static 'storiesapp/img/image.png' %}"/>".
It was the wrong syntax.
I was able to come to this solution because I realized that my CSS templates, which I can see are working, are also using the static folder so it couldn't be a problem with the way anything is set up.
I'm getting server errors because django can't find one of my static files even though I can see it in the folder:
ValueError: Missing staticfiles manifest entry for 'staticfiles\assets\img\icons\theme\communication\adress-book-2.svg'
I see the file sitting in this folder right here in both static and staticfiles:
static\assets\img\icons\theme\communication\
file path in template:
{% load static %}
<img src="{% static 'assets\img\icons\theme\communication\adress-book-2.svg' %}" alt="Confirmation Icon" class="icon bg-primary" data-inject-svg="data-inject-svg">
Running collectstatic doesn't have any effect. Any ideas?
Thanks!
EDIT: Forgot to add settings.py static settings:
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
STATIC_URL = '/static/'
# Extra places for collectstatic to find static files.
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static'),
)
DEBUG_PROPAGATE_EXCEPTIONS = True
STATICFILES_STORAGE = 'django.contrib.staticfiles.storage.StaticFilesStorage'
First you should remove the lines that say :
# Extra places for collectstatic to find static files.
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static'),
)
And then you can keep the first 2 lines:
STATIC_ROOT = os.path.join(BASE_DIR, 'Folder') #either put static or staticfiles and then remove the other folder
STATIC_URL = '/static/'
I'm working on a Django project and I can't see my static folder, I'm also having a problem displaying images.
And when I inspect the image div in the src it's written unknown, Here's how I display the image from the admin
``<img class="rounded-circle account-profile" src="{{ user.Profile.profile_photo.url }}" alt="profile">``
User is the current user, the profile and then the name of the column.
My folder structure is route-folder( project-folder, media-folder and app-folder )
My static settings
```STATIC_URL = '/static/'
SITE_ROOT = os.path.dirname(os.path.realpath(__file__))
STATICFILES_DIRS = [
os.path.join(SITE_ROOT, "static/"),
]```
The Url:
if settings.DEBUG:
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
I think you are trying to retrieve a media image not a static one. I recomend using Whitenoise package to serve static files.
Follow instruction in this tutorial: http://whitenoise.evans.io/en/stable/django.html
Check you have all this setup:
# Settings
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, "media")
STATICFILES_DIRS = (os.path.join(BASE_DIR, 'static'),)
In the templates, you should remember to add the {% load static %} to grant access to the actual files.
For some reason that I can not figure out. Only some of my static files are not loading. They used to but not anymore.
The ones loaded with django-bower work fine, any others don't.
Is it possible django-bower broke it or have I missed something.
settings.py
STATIC_URL = '/static/'
STATICFILES_FINDERS = ('djangobower.finders.BowerFinder',)
STATIC_ROOT = os.path.join(BASE_DIR, '..', 'static')
STATICFILES_DIRS = (os.path.join(BASE_DIR, 'static'))
BOWER_COMPONENTS_ROOT = os.path.join(BASE_DIR, 'components')
BOWER_INSTALLED_APPS = (
'jquery#1.9',
'knockout#3.3.0',
'knockout-mapping#2.0',
'bootstrap',
)
template:
{% load staticfiles %}
<link href="{% static 'css/styles.css' %}" rel="stylesheet">
project structure:
- project
- apps
- src
- static
- css
- styles.css
- media
You've replaced all staticfiles finders with only one, BowerFinder. This is no suprise that static files will be collected only from bower.
By default STATICFILES_FINDERS will contain:
(
"django.contrib.staticfiles.finders.FileSystemFinder",
"django.contrib.staticfiles.finders.AppDirectoriesFinder",
)
If you still want to use that staticfiles finders, you must set them together with your BowerFinder.
Try as:
<link href="{{ STATIC_URL }}css/styles.css">
I have a template that renders an image:
{% load staticfiles %}
<img src="{% static "img/logo.png" %}" alt="My image"/>
The image link is broken, but it points to:
localhost/static/img/logo.png
What are values I need to set for static_root, static_url, and STATICFILES_DIRS to get this image to show up correctly?
This is my directory structure:
myprojectname (top level)
--- myprojectname
--- --- myproectname
--- --- --- settings
--- --- --- --- base.py (setting.py)
--- --- static
--- --- --- img
This is my static configuration in settings:
STATIC_ROOT = '/Users/myuser/myprojectname/myprojectname'
STATIC_URL = '/static/'
STATICFILES_DIRS = (
#normpath(join(SITE_ROOT, 'static')),
os.path.join(BASE_DIR, "static"),
'/Users/myuser/myprojectname/myprojectname/static',
)
This is what it shows:
I have already done a collectstatic and this doesn't work.
Static files can be confusing in Django. I'll try to explain as simply as possible...
STATIC_ROOT
This is the directory that you should serve static files from in production.
STATICFILES_DIRS
This is the directory that you should serve static files from in development.
STATIC_ROOT and STATICFILES_DIRS cannot point to the same directory.
Django is a highly modular framework. Some application modules contain their own templates, css, images and JavaScript. Django admin is one such app. Django extends this modularity to applications you create by using different directories for static files in development versus production.
When DEBUG = True and you have included django.core.staticfiles in your INSTALLED_APPS, Django will serve the files located in the STATICFILES_DIRS tuple using the STATIC_URL path as the starting point.
In production this responsibility should be given to Nginx, Apache, CloudFront, etc. When DEBUG = False, Django will not automatically serve any static files.
When you run:
$ python manage.py collectstatic
The files specified in the STATICFILES_DIRS are copied into the STATIC_ROOT to be deployed.
So, to answer your question, I would do the following:
Create another directory to store your static files in development and add that path to your STATICFILES_DIRS. I usually call this folder "static-assets". It can reside at the same level as your existing "static" directory.
Set STATIC_ROOT to the path to your existing "static" directory.
If you look closely at the path that's returning a 404 in your screenshot, the image path is specified as: /static/img/logo.png, but your directory for images is: /static/image/
So double-check your image path to make sure you're pointing to the right directory.
Make folder "staticfiles" in root of your project where settings.py exists
In staticfiles you can go this way..
css
js
images
In settings.py
STATIC_ROOT = os.path.join(PROJECT_DIR,'static')
STATIC_URL = '/static/'
STATICFILES_DIRS = (
os.path.join(PROJECT_DIR,'staticfiles'), # if your static files folder is named "staticfiles"
)
TEMPLATE_DIRS = (
os.path.join(PROJECT_DIR,'template'), # if your static files folder is named "template"
)
In base.html
<link rel="stylesheet" type="text/css" href="{% static 'css/demo.css' %}" />
<script type="text/javascript" src="{% static 'js/jquery.min.js' %}"></script>
In other template files in which you include base.html
{% extends "base.html" %}
{% load static %}
<script type="text/javascript" src="{% static 'js/jquery.min.js' %}"></script>
<div id="yourID" class="yourClass">
<img src="{% static "images/something.gif" %}" alt="something" >
</div>
If you are in development mode then define just one line:
STATICFILES_DIRS = ( os.path.join('static'), )
You don't need to define STATIC_ROOT = '/Users/myuser/myprojectname/myprojectname'
OR
STATICFILES_DIRS as BASE_DIR
So, working solution is :
STATIC_URL = '/static/'
STATICFILES_DIRS = ( os.path.join('static'), )
actually I too was struggling with the same problem , it got resolved now , check javapoint documentation once its really good , another method that worked for me is change the path of static folder i.e place the static folder inside the app folder that u have created (in my case , the static folder is inside the first_app folder) . it should work . after that I relocated my folders back to where it was and to my surprise , it worked again!. sometimes it may be the fault of browser . I tried my level best to explain as I am a beginner in Django .
If you want to save static files in Django you will need to do the following
in settings.py file you will have something like this `
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'my_project/static') # where I want to host the static files i.e img, js & css
]
depends on how you have structure you files but you will need to have something like this in your urls.py
from django.contrib import admin
from django.urls import path, include
from django.conf.urls.static import static
from django.conf import settings
urlpatterns = [
path('', include('appfront.urls')),
path('admin/', admin.site.urls),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
Final your template will have something like this Note the usage of static tag
{% load static %}
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-primary sticky-top">
<div class="container">
<a class="navbar-brand" href="{% url 'index' %}">
<img src="{% static 'img/logo.png' %}" class="logo" alt="">
</a>
'''