Django 3.0.8
Python 3.7.x
I've got a Django project with a few apps. I'm trying to make some 'default' error pages for like 400, 403, 404, 500 errors. I've done that and the appropriate templates display - but without any styling or JS.
In the 404 error page, I'm trying to link to the CSS from one of the apps so the correct styling gets applied - but in the console, I see this error:
Refused to apply style from 'http://127.0.0.1:8000/static/launcher/dist/css/launcher.css' because of its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
The file exists there, however.
That particular CSS file lives in two places: in the app directory and it also lives in the STATIC_ROOT because I ran the python manage.py collectstatic command.
The STATIC_URL is set to /static/
The CSS file is located at:
project_dir/launcher/static/launcher/dist/css/launcher.css
project_dir/static/launcher/dist/css/launcher.css
My 404 template lives at:
project_dir/templates/404.html
My link to the CSS looks like this:
<link rel="stylesheet" type="text/css" href="{% static 'launcher/dist/css/launcher.css' %}" />
My project URL's look like this:
urlpatterns = [
path("admin/", admin.site.urls),
path("", include("launcher.urls")),
path("app2/", include("app2.urls")),
path("app3/", include("app3.urls")),
path(
"robots.txt",
TemplateView.as_view(
template_name="robots.txt", content_type="text/plain"
),
),
path(
"favicon.ico",
RedirectView.as_view(
url=staticfiles_storage.url("favicon.ico"), permanent=False
),
name="favicon",
),
]
urlpatterns += static(
settings.MEDIA_URL, document_root=settings.MEDIA_ROOT
)
urlpatterns += static(
settings.STATIC_URL, document_root=settings.STATIC_ROOT
)
I've tried a lot of different solutions (like getting rid of comments in the CSS or changing the type in the HTML link) but nothing has worked thus far.
What is the best way to accomplish this?
EDIT TO ADD: My 404.html page looks like this:
{% extends 'error_base.html' %}
{% load static %}
{% block css_imports %}
<link rel="stylesheet" type="text/css" href="{% static 'launcher/dist/css/launcher.css' %}" />
{% endblock %}
{% block script_imports %}
<script src="{% static 'launcher/dist/js/vendors~main.f11c6fb90f8f72673956.js' %}"></script>
<script src="{% static 'launcher/dist/js/main.dce999efa12cf745c86d.js' %}"></script>
{% endblock %}
{% block content %}
<h1>Whoops!</h1>
404
<h3>We are having some issue finding that particular item.</h3>
<p>If you feel this was due to an error - please contact us!
</p>
{% endblock %}
The JS files give 404 errors as well, but I figure once I find out the cause of the CSS issues, I can figure out the JS issues as well. The 'error_base.html' file is essentially a boilerplate HTML file with the appropriate blocks in the appropriate spots for the blocks listed in the 404.html page.
ADDITIONAL EDIT TO ADD :
My static files settings look like this:
# Static files (CSS, JavaScript, Images)
STATIC_URL = "/static/"
STATIC_ROOT = os.path.join(BASE_DIR, "static")
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'launcher/static/'),
os.path.join(BASE_DIR, 'app1/static/'),
os.path.join(BASE_DIR, 'app2/static/'),
]
# Media files
MEDIA_URL = "/media/"
MEDIA_ROOT = os.path.join(BASE_DIR, "media")
EDIT TO ADD: Tree structure looks like this:
├── README.md
├── project_dir
│ ├── __init__.py
│ ├── context_processors.py
│ ├── settings.py
│ ├── unit-test-settings.py
│ ├── urls.py
│ ├── utils.py
│ └── wsgi.py
├── geckodriver.log
├── app_1
├── static
│ └── app_1
│ ├── dist
│ │ ├── css
│ │ │ └── app_1.css
│ │ └── js
│ │ ├── main.f3eaca15a899d1a9d4e4.js
│ │ └── vendors~main.48489b4c92919034fc8f.js
│ ├── fa-grav.png
│ ├── grav.png
│ ├── grav_30.png
│ └── src
│ ├── css
│ │ └── style.css
│ ├── html
│ │ └── webpack_bundles.html
│ ├── js
│ │ ├── index.js
│ │ └── indellis_form.js
│ └── scss
│ └── app_1.scss
└─ ....other standard app files
├── app_2
├── static
│ └── app_2
│ ├── dist
│ │ ├── css
│ │ │ └── app_2.css
│ │ └── js
│ │ ├── main.cedd2abecaa899d1a9d4e4.js
│ │ └── vendors~main.48325ceds92919034fc8f.js
│ ├── fa-grav.png
│ ├── grav.png
│ ├── grav_30.png
│ └── src
│ ├── css
│ │ └── style.css
│ ├── html
│ │ └── webpack_bundles.html
│ ├── js
│ │ ├── index.js
│ │ └── registration_form.js
│ └── scss
│ └── app_2.scss
└─ ....other standard app files
├── launcher
│ ├── static
│ │ └── launcher
│ │ ├── dist
│ │ │ ├── css
│ │ │ │ └── launcher.css
│ │ │ └── js
│ │ │ ├── main.75ef788b0aea38c3c71b.js
│ │ │ └── vendors~main.d806da1f66faa822a6ef.js
│ │ └── src
│ │ ├── css
│ │ │ └── style.css
│ │ ├── html
│ │ │ └── webpack_bundles.html
│ │ ├── js
│ │ │ └── index.js
│ │ └── scss
│ │ └── launcher.scss
└─ ....other standard app files
├── manage.py
├── pyproject.toml
├── pytest.ini
├── requirements.txt
├── setup.cfg
├── static
│ ├── app_1
│ │ ├── dist
│ │ │ ├── css
│ │ │ │ └── app_1.css
│ │ │ └── js
│ │ │ ├── main.f3eaca15a899d1a9d4e4.js
│ │ │ └── vendors~main.48489b4c92919034fc8f.js
│ │ ├── fa-grav.png
│ │ ├── grav.png
│ │ ├── grav_30.png
│ │ └── src
│ │ ├── css
│ │ │ └── style.css
│ │ ├── html
│ │ │ └── webpack_bundles.html
│ │ ├── js
│ │ │ ├── index.js
│ │ │ └── indellis_form.js
│ │ └── scss
│ │ └── app_1.scss
│ ├── project_dir
│ │ ├── favicon.ico
│ │ ├── icons
│ │ │ ├── android-chrome-144x144.png
│ │ │ ├── apple-touch-icon-120x120-precomposed.png
│ │ │ ├── apple-touch-icon-120x120.png
│ │ │ ├── apple-touch-icon-152x152-precomposed.png
│ │ │ ├── apple-touch-icon-152x152.png
│ │ │ ├── apple-touch-icon-180x180-precomposed.png
│ │ │ ├── apple-touch-icon-180x180.png
│ │ │ ├── apple-touch-icon-60x60-precomposed.png
│ │ │ ├── apple-touch-icon-60x60.png
│ │ │ ├── apple-touch-icon-76x76-precomposed.png
│ │ │ ├── apple-touch-icon-76x76.png
│ │ │ ├── apple-touch-icon-precomposed.png
│ │ │ ├── apple-touch-icon.png
│ │ │ ├── browserconfig.xml
│ │ │ ├── favicon-16x16.png
│ │ │ ├── favicon-32x32.png
│ │ │ ├── mstile-144x144.png
│ │ │ ├── mstile-150x150.png
│ │ │ ├── safari-pinned-tab.svg
│ │ │ └── site.webmanifest
│ │ └── proj_icon.ico
│ ├── launcher
│ │ ├── dist
│ │ │ ├── css
│ │ │ │ └── launcher.css
│ │ │ └── js
│ │ │ ├── main.75ef788b0aea38c3c71b.js
│ │ │ └── vendors~main.d806da1f66faa822a6ef.js
│ │ └── src
│ │ ├── css
│ │ │ └── style.css
│ │ ├── html
│ │ │ └── webpack_bundles.html
│ │ ├── js
│ │ │ └── index.js
│ │ └── scss
│ │ └── launcher.scss
│ ├── app_2
│ │ ├── dist
│ │ │ ├── css
│ │ │ │ └── app_2.css
│ │ │ └── js
│ │ │ ├── main.cedd2abecaa899d1a9d4e4.js
│ │ │ └── vendors~main.48325ceds92919034fc8f.js
│ │ ├── fa-pdf.png
│ │ ├── id_card_30.png
│ │ ├── rc-u.png
│ │ ├── rg.png
│ │ └── src
│ │ ├── css
│ │ │ └── style.css
│ │ ├── html
│ │ │ └── webpack_bundles.html
│ │ ├── js
│ │ │ └── index.js
│ │ └── scss
│ │ └── app_2.scss
├── templates
│ ├── 400.html
│ ├── 403.html
│ ├── 404.html
│ ├── 500.html
│ ├── base.html
│ ├── error_base.html
│ └── robots.txt
TLDR:
If you want to serve static files with DEBUG=False using a local development server, you need to use the --insecure flag:
python manage.py runserver --insecure
Why you get the error:
Every time you render html in your browser, behind the scenes a request is made to fetch each of your static files. So in your case, the 404.html template is telling your browser to fetch http://127.0.0.1:8000/static/launcher/dist/css/launcher.css. If your django server doesn't know where that file is, it will respond with the 404.html template instead of the css, which has a MIME type of text/html, and not text/css, hence your error.
Why django can't find the css files:
If you look at the source code for the static function that you call in your urls.py, it looks something like this:
from django.conf.urls.static import static
def static(...):
if not settings.DEBUG:
return []
return [
re_path(...)
]
Which means that the re_path that is used to render static files, is no longer there, since you set DEBUG=False to test your 404.html template...
Credit to Dmitry Shevchenko for the shortcut.
This usually means the page can't find your css file and is trying to load your not found page which is html.
Try using a full absolute path for the link on your error page and see if that works:
<link rel="stylesheet" type="text/css" href="/static/launcher/dist/css/launcher.css"/>
If that works, then I would next check to make sure the static variable Django is replacing is actually set correctly at runtime. I suspect the path is slightly off.
If that doesn't work, try the full absolute path to the css file in your app folder instead of STATIC_ROOT:
<link rel="stylesheet" type="text/css" href="/launcher/static/launcher/dist/css/launcher.css"/>
If that works and the first one didn't, then I would suspect a problem somewhere in the configuration/translation when your files get collected to STATIC_ROOT. I'm not familiar with the process so I'm not sure exactly what get's moved where and what metadata gets changed, if any. I'd imagine none does, but the only way to be sure is to try it out.
Update:
It looks like your STATICFILES_DIRS are not pointing to the end folders the css files are actually in. Complete those paths and it may work (add dist/static... etc.)
I would have write a comment but i can't, due to reputation, because i am new. You should try to access the link (http://127.0.0.1:8000/static/launcher/dist/css/launcher.css) in your browser! If the css file doesn't open the path is the problem.
Another possible cause is a comment at the beginning of the css file.
Related
After reading through this question, I have some insight as to why when trying to launch my app after deploying to Heroku, I get the following error: raise TemplateNotFound(template), jinja2.exceptions.TemplateNotFound: index.html.
They are saying that the templates should be at the project directory root as shown here. Is there anyway I can modify where Heroku is trying to look for the templates directory? I modified my project structure since my app was growing in size and starting to look a bit unorganized.
Here is a look at my current project structure:
Project
│
├── App
│ ├── DbMs
│ │ ├── db_actions.py
│ │ └── user_operations.py
│ ├── UI
│ │ ├── static
│ │ │ ├── css
│ │ │ │ └── main.css
│ │ │ ├── fonts
│ │ │ │ └── Gotham_Medium_Regular.json
│ │ │ ├── images
│ │ │ │ ├── favicons
│ │ │ │ │ ├── android-chrome-192x192.png
│ │ │ │ │ ├── android-chrome-512x512.png
│ │ │ │ │ ├── apple-touch-icon.png
│ │ │ │ │ ├── favicon-16x16.png
│ │ │ │ │ ├── favicon-32x32.png
│ │ │ │ │ ├── favicon.ico
│ │ │ │ │ └── site.webmanifest
│ │ │ │ ├── header.jpeg
│ │ │ │ ├── logo.png
│ │ │ │ └── radar-chart.png
│ │ │ └── javascript
│ │ │ ├── FontLoader.js
│ │ │ ├── TextGeometry.js
│ │ │ ├── create.js
│ │ │ ├── exploreMusic.js
│ │ │ └── tracks.js
│ │ └── templates
│ │ ├── base.html
│ │ ├── create.html
│ │ ├── index.html
│ │ ├── information.html
│ │ └── tracks.html
│ ├── __init__.py
│ ├── authenticate.py
│ ├── routes.py
│ ├── services.py
│ └── templates
├── Pipfile
├── Procfile
├── README.md
├── Testing
│ ├── __init__.py
│ └── testing.py
├── __pycache__
│ ├── authenticate.cpython-39.pyc
│ ├── config.cpython-39.pyc
│ ├── main.cpython-39.pyc
│ ├── services.cpython-39.pyc
│ └── user_operations.cpython-39.pyc
├── config.py
├── package-lock.json
├── package.json
├── requirements.txt
├── run.py
└── setup.py
For more context, I have everything running perfectly fine locally, I only see this error after deployment. Thanks to anyone who can provide insight.
EDIT: I tried moving the templates folder into the App directory as well as the project root and changing the following line in __init__.py both times:
template_dir = os.path.abspath('../Project/templates/')
After deploying each time, I changed the location of templates, still see the same error from Heroku: raise TemplateNotFound(template) jinja2.exceptions.TemplateNotFound: index.html
So it turns out that Heroku is picky with modifying the location of the templates & static folders.
Whats was very misleading about this issue was that I could run everything fine locally but as soon as I deployed to Heroku, the entire App would break..
The way I fixed this was by moving templates & static into the App directory. I also had to make sure that i changed the following line from:
template_dir = os.path.abspath('../Soulify/App/templates/')
static_dir = os.path.abspath('../Soulify/App/UI/static/')
app = Flask(__name__, template_folder=template_dir, static_folder=static_dir)
to:
app = Flask(__name__)
Also note that the template folder has to be named templates exactly or Heroku will fail. Again, pretty annoying.
I am using Sphinx to document my django application. My directory tree, based on this django tutorial is:
.
├── db.sqlite3
├── help
│ ├── admin.py
│ ├── apps.py
│ ├── __init__.py
│ ├── migrations
│ │ └── __init__.py
│ ├── models.py
│ ├── templates
│ │ └── help
│ │ ├── _images
│ │ ├── index.html
│ │ ├── _modules
│ │ ├── objects.inv
│ │ ├── _sources
│ │ │ └── index.rst.txt
│ │ └── _static
│ │ ├── css
│ │ │ ├── badge_only.css
│ │ │ └── theme.css
│ │ ├── fonts
│ │ └── js
│ │ ├── modernizr.min.js
│ │ └── theme.js
│ ├── tests.py
│ ├── urls.py
│ └── views.py
├── manage.py
├── mysite
│ ├── __init__.py
│ ├── settings.py
│ ├── urls.py
│ └── wsgi.py
├── polls
│ ├── admin.py
│ ├── apps.py
│ ├── __init__.py
│ ├── migrations
│ │ ├── 0001_initial.py
│ │ └── __init__.py
│ ├── models.py
│ ├── tests.py
│ ├── urls.py
│ └── views.py
└── users
├── admin.py
├── apps.py
├── __init__.py
├── migrations
│ └── __init__.py
├── models.py
├── tests.py
├── urls.py
└── views.
The code to set the css file in the html is:
<link rel="stylesheet" href="_static/css/theme.css" type="text/css" />
This looks like an relative link, but the css is not picked up when the help file is displayed in django.
views.py
def index(request):
return render(request, 'help/index.html', {})
urls.py
urlpatterns = [
url(r'^help/', views.index, name='index'),
]
It works if the page is loaded directly into the browser.
How can I get the css file loaded?
On the top of your html file specify:
{% load static %}
Your css:
<link rel="stylesheet" href="{% static 'css/theme.css' %}" type="text/css" />
I have successfully deployed my application to Elastic beanstalk. Everything is working except the bootstrap themes. When I view source and try to access the links to the files I get.
Source
<!-- Custom CSS -->
<link href= "/static/css/blog-home.css" rel="stylesheet">
<link href= "/static/css/bootstrap-datetimepicker.css" rel="stylesheet">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
I get this...
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
<html><head>
<title>403 Forbidden</title>
</head><body>
<h1>Forbidden</h1>
<p>You don't have permission to access /static/bootstrap.min.css
on this server.<br />
</p>
</body></html>
Here is what I see in my logs
[authz_core:error] [pid 18657] [client 10.30.229.177:34675] AH01630: client denied by server configuration: /webapp, referer: http://www.evenster.io/user/user_id=2
I have configured the properties on EB to include the static folders in python.conf
option_settings:
"aws:elasticbeanstalk:container:python:staticfiles":
"/static/": "static/"
I have also done a chmod -R 777 on my entire application tree to ensure that the files have permision.
My folder structure is:
app
├── __init__py.old
├── application.py
├── application.pyc
├── manage.py
├── migrations
│ ├── README
│ ├── alembic.ini
│ ├── env.py
│ ├── env.pyc
│ ├── script.py.mako
│ └── versions
│ ├── 48f38b800968_.py
│ └── 48f38b800968_.pyc
├── requirements.txt
└── webapp
├── __init__.py
├── __init__.pyc
├── _olddatabase.db
├── config.py
├── config.pyc
├── database.db
├── forms.py
├── forms.pyc
├── models.py
├── models.pyc
├── static
│ ├── blog-home.css
│ ├── bootstrap-datetimepicker.min.css
│ ├── bootstrap-theme.min.css
│ ├── css
│ │ ├── blog-home.css
│ │ ├── bootstrap-datetimepicker.min.css
│ │ ├── bootstrap-theme.css
│ │ ├── bootstrap-theme.css.map
│ │ ├── bootstrap-theme.min.css
│ │ ├── bootstrap-theme.min.css.map
│ │ ├── bootstrap.css
│ │ ├── bootstrap.css.map
│ │ ├── bootstrap.min.css
│ │ ├── bootstrap.min.css.map
│ │ ├── toolkit.css
│ │ └── toolkit.min.css
│ ├── fonts
│ │ ├── glyphicons-halflings-regular.eot
│ │ ├── glyphicons-halflings-regular.svg
│ │ ├── glyphicons-halflings-regular.ttf
│ │ ├── glyphicons-halflings-regular.woff
│ │ └── glyphicons-halflings-regular.woff2
│ └── js
│ ├── bootstrap-datetimepicker.min.js
│ ├── bootstrap.js
│ ├── bootstrap.min.js
│ ├── jquery.js
│ ├── moment-with-locales.min.js
│ ├── moment.js
│ ├── npm.js
│ ├── scripts.js
│ ├── toolkit.js
│ └── toolkit.min.js
├── templates
│ ├── 500.html
│ ├── _login.html
│ ├── _question_settings.html
│ ├── base.html
│ ├── create_event.html
│ ├── create_event2.html
│ ├── create_user.html
│ ├── event.html
│ ├── events.html
│ ├── flash.html
│ ├── index.html
│ ├── index2.html
│ ├── login.html
│ ├── logout.html
│ ├── question.html
│ ├── questions.html
│ ├── test.html
│ ├── user.html
│ ├── user_events.html
│ ├── user_questions.html
│ └── users.html
├── views.py
└── views.pyc
I am getting a 'template not found' error, although I've set up a correct template hierarchy (or so I thought)
.
├── manage.py
├── twinja
│ ├── admin.py
│ ├── admin.pyc
│ ├── __init__.py
│ ├── __init__.pyc
│ ├── migrations
│ │ ├── __init__.py
│ │ └── __init__.pyc
│ ├── models.py
│ ├── models.pyc
│ ├── tests.py
│ └── views.py
└── twinjasite
├── __init__.py
├── __init__.pyc
├── settings.py
├── settings.py~
├── settings.pyc
├── static
│ └── twinja
│ ├── fonts
│ │ └── bootstrap
│ │ ├── glyphicons-halflings-regular.eot
│ │ ├── glyphicons-halflings-regular.svg
│ │ ├── glyphicons-halflings-regular.ttf
│ │ ├── glyphicons-halflings-regular.woff
│ │ └── glyphicons-halflings-regular.woff2
│ ├── images
│ ├── javascripts
│ │ ├── bootstrap
│ │ │ ├── affix.js
│ │ │ ├── alert.js
│ │ │ ├── button.js
│ │ │ ├── carousel.js
│ │ │ ├── collapse.js
│ │ │ ├── dropdown.js
│ │ │ ├── modal.js
│ │ │ ├── popover.js
│ │ │ ├── scrollspy.js
│ │ │ ├── tab.js
│ │ │ ├── tooltip.js
│ │ │ └── transition.js
│ │ ├── bootstrap.js
│ │ ├── bootstrap.min.js
│ │ └── bootstrap-sprockets.js
│ └── stylesheets
│ ├── framework.css
│ └── styles.css
├── templates
│ └── twinja
│ ├── base.html
│ └── menu.html
├── urls.py
├── urls.py~
├── urls.pyc
├── views.py
├── views.py~
├── views.pyc
├── wsgi.py
└── wsgi.pyc
At first I set up templates/base but that did not work. So I made it as you see here: templates/twinja/base
Ideally I'm setting up the MAIN template files which are independent of apps, which I thought was meant to go in the main folder (where settings.py is) but perhaps I am mistake.
Yes, I have 'twinja' set up in installed apps as well.
What appears to be wrong here?
TemplateDoesNotExist at /
twinja/base.html
If your template is independent of apps, it shouldn't be in your app folder - namespace it accordingly.
How do you load your template? Did you setup your templates/staticfolders in your settings.py?
Updated.
For the fresh project you need to configure your settings.py file. Read here, ask away if you still have a question.
Updated.
After you get familiar with static files and how to manage those, spend some time here.
I am trying to serve my Django project, set up with django-skel 1.4, using the development server. My site runs as expected except for my images, they are not served.
Part of templates/home.html
<img width="65px;" src="assets/img/pic.png" alt="" id="symbol" />
I'm guessing I should change something in this part: src="assets/img/pic.png".
I've looked around in SO threads and tweaked according to the given answers but I could not manage to make it work.
So how do I properly set images in templates?
Other relevant information:
settings.common.py
DJANGO_ROOT = dirname(dirname(abspath(__file__)))
MEDIA_ROOT = normpath(join(DJANGO_ROOT, 'media'))
MEDIA_URL = '/media/'
STATIC_ROOT = normpath(join(DJANGO_ROOT, 'static'))
STATIC_URL = '/static/'
STATICFILES_DIRS = (
normpath(join(DJANGO_ROOT, 'assets')),
)
STATICFILES_FINDERS = (
'django.contrib.staticfiles.finders.FileSystemFinder',
'django.contrib.staticfiles.finders.AppDirectoriesFinder',
'compressor.finders.CompressorFinder',
)
Tree of project
.
├── apps
│ └── __init__.py
├── assets
│ ├── css
│ │ └── base.css
│ ├── img
│ │ └── pic.png
│ └── js
├── default.db
├── __init__.py
├── libs
│ ├── core
│ │ ├── admin.py
│ │ ├── __init__.py
│ │ ├── models.py
│ │ ├── views.py
│ │ └── views.pyc
│ └── __init__.py
├── settings
│ ├── common.py
│ ├── dev.py
│ ├── __init__.py
│ └── prod.py
├── templates
│ ├── 404.html
│ ├── 500.html
│ ├── home.html
│ └── install.html
└── urls.py
Btw: Please no solutions using if settings.DEBUG, preferably if possible without needing to adapt urls.py.
Edit
Tree of the top level directory after doing collectstatic
.
├── fabfile.py
├── gunicorn.py.ini
├── manage.py
├── Procfile
├── project_name
│ ├── apps
│ │ └── __init__.py
│ ├── assets
│ │ ├── css
│ │ │ └── base.css
│ │ ├── img
│ │ │ └── pic.png
│ │ └── js
│ ├── default.db
│ ├── __init__.py
│ ├── libs
│ │ ├── core
│ │ │ ├── admin.py
│ │ │ ├── __init__.py
│ │ │ ├── models.py
│ │ │ └── views.py
│ │ └── __init__.py
│ ├── settings
│ │ ├── common.py
│ │ ├── dev.py
│ │ ├── __init__.py
│ │ └── prod.py
│ ├── static
│ │ │ └── js
│ │ ├── css
│ │ │ └── base.css
│ │ └── img
│ │ └── pic.png
│ ├── templates
│ │ ├── 404.html
│ │ ├── 500.html
│ │ ├── home.html
│ │ └── install.html
│ └── urls.py
├── README.md
├── reqs
│ ├── common.txt
│ ├── dev.txt
│ └── prod.txt
├── requirements.txt
└── wsgi.py
Edit 2
My understanding how Django reads the path:
Let src="static/img/pic.png", from my settings.common.py:
>>> DJANGO_ROOT
'/home/my_username/web/my_project/my_project'
>>> j = os.path.join(DJANGO_ROOT, 'static/')
>>> print j
/home/my_username/web/my_project/my_project/static
But
>>> STATIC_URL
'/static/'
>>> j = os.path.join(DJANGO_ROOT, STATIC_URL)
>>> print j
/static/
So somewhere Django probably does os.path.join that is the only reason I can think of why
src="static/img/pic.png" works but src="{{STATIC_URL}}img/pic.png" doesn't. But why then does this apparently work for other people but not for me?
I think you have to add the following to urls.py
(r'^media/(?P<path>.*)$', 'django.views.static.serve', {
'document_root': settings.MEDIA_ROOT,
}),
at least thats how I always do it...
You need to add
TEMPLATE_CONTEXT_PROCESSORS = (
...
'django.core.context_processors.static',
)
and add staticfiles to your INSTALLED_APPS
You need to modify your img tag
<img width="65px;" src="{{STATIC_URL}}assets/img/pic.png" alt="" id="symbol" />
If it is user uploaded content then replace {{STATIC_URL}} with {{MEDIA_URL}}
Also see related Django cannot find my media files (on development server)