I am have been having troubles figuring out how to serve static images with my django application. However, I have figured out a sort of "hack" to get it working but it doesn't allow for much flexibility.
In the html files I have tried the following...
<img src="{{ STATIC_URL }}textchange/nextarrow.png" class="foobar" id="foobar">
Above: The pages will load when I use this but the images will not work.
<img src="{% static "textchange/nextarrow.png" %}" class="foobar" id="foobar">
Above: The pages will not load, I get a server error
<img src="thefullurltoS3bucket/nextarrow.png" class="foobar" id="foobar">
Above: The images will load fine
I have been trying all these different formats when going to production with Heroku and S3. The question I have is is the way I'm serving my static images correct? I use the last example in which I make the src the full url to the bucket at s3. Is that fine?
It should be noted that when I use the static tag serving css files works fine. Images is the only problem.
Your first and second solutions ( that you got server error and not loading ) is the correct way of using static files which is:
<img src="{% static "textchange/nextarrow.png" %}" class="foobar" id="foobar">
review your settings.py file and set STATIC_URL and STATIC_DIRS and also STATIC_ROOT, if you got server error maybe you set the STATIC_URL or STATIC_DIRS wrong. you can find plenty of posts about these settings.
Also check your image url in browser ( sth like 127.0.0.1:8000/static/files/etc.jpg )see if you can access the image.
Serving static files in Django can be a pain.
First, make sure you use the static template tag correctly in your template:
{% load static from staticfiles %}
<img src="{% static 'path/to/image.jpg' %}">
In your settings, have your STATIC_URL point to something like '/static/', your STATIC_ROOT point to the directory where you'll actually serve your files post-collectstatic, and your STATIC_DIRS to where you'll place your static files within your project (i.e. 'static' directory).
If you're serving from S3, you'll probably follow a tutorial like this one.
Related
I am new to Django and so far all I know about static files is that they are CSS, JS, and images and they should be in a directory called static within the app directory
but when I use one of these files in my template like that:
first I load the static files
{% load static %} <!-- in the 1st line of the template -->
then I link the CSS file like that
<link href="{% static 'auctions/styles.css' %}" rel="stylesheet">
They don't load and the styles don't seem to appear
so I just want to know what I am missing here
this is the project tree enter image description here
static root and url from settings
STATIC_URL = '/static/'
STATIC_ROOT = 'E:/Work/SoftwareDevelopment/Web/Django/commerce/auctions/static'
Did you ran python manage.py collectstatic?
You also need to configurate your settings.py with STATIC_URL = '/static/'
Docs
Are your auctions's static folder separated in css, js, images folders? If so, you are missing specifying that in static:
'auctions/css/styles.css'
If that doesn't work, try running collectstatic manually and getting the path to the file from there to pass in the html.
I have a legacy project with a bunch of html files and static files (css, images, js, videos ...). All links in those html files are relative and hardcoded:
"css/main.css" or "img/my_img.jpg" etc.
I need to run that project using django.
I cannot change all those links to kind of
{% load static %}
<link rel="stylesheet" href="{% static 'css/main.css' %}">
but all recipes I found in internet suggest using exactly that method.
How can I:
1) route hardcoded urls like "css/main.css"
2) route hardcoded urls like "another.html" ?
This can be done with much ease like this<!--lets' say image-->
<img src="{% static 'static/images/image1.png' %}">.Please make sure the file directories match with that in the code.
Please visit https://docs.djangoproject.com/en/1.10/howto/static-files for detailed info
So I followed this tutorial:
https://github.com/rancavil/django-openshift-quickstart/wiki/Tutorial-How-create-an-application-with-Django-1.6-on-Openshift
and I tried to add a static image to the default home.html page and it just won't find it.
HTML:
{% load static %}
<html>
<head>
</head>
<body>
<img src="{% static 'Logo_Trans.png' %}">
<div class="left"></div>
<div class="right">
<p>is coming soon</p>
</div>
</body>
</html>
All other files are as listed in the repo given.
I've found the problem. The static files were serving properly when deployed but not when in debug mode. To fix this just add the STATICFILES_DIR variable in settings.py
Find:
if ON_OPENSHIFT:
DEBUG = False
else:
DEBUG = True
Add:
if ON_OPENSHIFT:
DEBUG = False
else:
DEBUG = True
STATICFILES_DIRS = (os.path.join(BASE_DIR, "static"),
'/var/www/static/',)
Openshift is a very good service but definitely needs to update their docs/examples for django. Their sample program still runs django 1.4. Hope this helps anyone else that runs into this problem.
you can read the answer for this question Django cannot find static files. Need a second pair of eyes, I'm going crazy. Hope it will help you to understand static files. Static files in Django are always a bit painful.
Btw, as I explain in the last comment, I recommend you to create an app called common within a static folder inside it to place static content that is not application specific. Static application specific files should be placed inside the static folder within your app. This way, you can forget about defining the STATICFILES_DIRS variable and it will always work in DEBUG mode.
After that, ofc, define STATIC_ROOT and when you want to work in deploy mode, do the collectstatic command and it will also work.
After dealing hundreds of times with issues like this, I've found this is the best approach.
I'm making a simple Django project but I cannot get any images to display in my pages.
Django documentation at https://docs.djangoproject.com/en/1.3/howto/static-files/#basic-usage states
Basic usage Put your static files somewhere that staticfiles will find
them.
By default, this means within static/ subdirectories of apps in your
INSTALLED_APPS.
Your project will probably also have static assets that aren’t tied to
a particular app. The STATICFILES_DIRS setting is a tuple of
filesystem directories to check when loading static files. It’s a
search path that is by default empty. See the STATICFILES_DIRS docs
how to extend this list of additional paths.
Additionally, see the documentation for the STATICFILES_FINDERS
setting for details on how staticfiles finds your files.
Make sure that django.contrib.staticfiles is included in your
INSTALLED_APPS.
For local development, if you are using runserver or adding
staticfiles_urlpatterns to your URLconf, you’re done with the setup –
your static files will automatically be served at the default (for
newly created projects) STATIC_URL of /static/.
You’ll probably need to refer to these files in your templates. The
easiest method is to use the included context processor which allows
template code like:
See Referring to
static files in templates for more details, including an alternate
method using a template tag.
So I did this in settings.py:
STATICFILES_DIRS = (
'/home/abc/django/project1/media/',
)
and enabled 'django.contrib.staticfiles',
In media, I have a folder img, which has various jpg files.
In my template, I have this as one of the lines:
<img src="{{STATIC_URL}}img/{{var}}.jpg">
When I'm passing var to this template via my view.
The HTML page seems to render this tag as "<img src="img/abc.jpg"> where var="abc".
But my browser refuses to display the image. What have I done wrong?
Did you see ths part in the documentation:
If {{ STATIC_URL }} isn't working in your template, you're probably not using RequestContext when rendering the template.
Do you also use RequestContext in your view to render the template?
Here is an alternative approach:
settings.py:
import os
PROJECT_DIR = os.path.dirname(__file__) + '/../'
STATIC_ROOT = os.path.join(PROJECT_DIR, 'media/')
STATIC_URL = '/media/'
In your template:
{% load staticfiles %}
<img src="{% static img/foo.jpg %}" />
If you need to pass a variable, use the prefix method:
{% load staticfiles %}
<img src="{% get_static_prefix %}img/{{var}}.jpg" />
I have some problems with static file, when i use them in pybb. I work on django 1.3 and python 2.6.5.
My settings file is here
I put my css and images in /static/pybb/css and /static/pybb/images
when i put tag like
<link rel="stylesheet" href="{{ STATIC_URL }}pybb/my.css">
in my templates, it doesn't work. This is the same with image
<img src="{{ STATIC_URL }}pybb/images/myimage.jpg">
To sum it up, my own static files don't appear in my project templates.
any idea? perhaps i forgot something
Why are you putting css in package static files directory?
Also directories in STATICFILES_DIRS should not overlaps. Look at example provided with pybbm or even start project from this example.