javascript - How to add Css and Js files in Django python - Stack Overflow|Programmer puzzle solving

I am facing to load static only css and Javascript in my django project. By this code image files are loading but only js and css files are not loading

 {% load staticfiles %}
 <html xmlns="">
 <head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
 <title>Home</title>
 <link href="{% static "pro.css" %}" rel="stylesheet" type="text/css"/>
 </head>
 <body>
 <div id="sd">
 <h1>Hi my first django application</h1>
 <img src="{% static "images/img08.jpg" %}"/>
 <div id="demo"></div>
 </div>
 </body>
 </html>

and my page source in browser

<html xmlns="">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Home</title>
<link href="/static/pro.css rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="sd">
<h1></h1> 
<img src="/static/images/img08.jpg"/>
<div id="demo"></div>
</div>
</body> 
</html>

my setting files code`

# Static files (CSS, JavaScript, Images)
# .8/howto/static-files/
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
STATIC_ROOT = os.path.join(BASE_DIR,'static')
STATIC_URL = '/static/'
STATICFILES_DIRS=     (os.path.join(BASE_DIR,'questions','static','css'),os.path.join(BASE_DIR,'questions','static','js'),)

I got this error message when i checked in my Javascript console - 127.0.0.1/:19 Resource interpreted as Stylesheet but transferred with MIME type application/x-css:

I am facing to load static only css and Javascript in my django project. By this code image files are loading but only js and css files are not loading

 {% load staticfiles %}
 <html xmlns="http://www.w3/1999/xhtml">
 <head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
 <title>Home</title>
 <link href="{% static "pro.css" %}" rel="stylesheet" type="text/css"/>
 </head>
 <body>
 <div id="sd">
 <h1>Hi my first django application</h1>
 <img src="{% static "images/img08.jpg" %}"/>
 <div id="demo"></div>
 </div>
 </body>
 </html>

and my page source in browser

<html xmlns="http://www.w3/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Home</title>
<link href="/static/pro.css rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="sd">
<h1></h1> 
<img src="/static/images/img08.jpg"/>
<div id="demo"></div>
</div>
</body> 
</html>

my setting files code`

# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject./en/1.8/howto/static-files/
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
STATIC_ROOT = os.path.join(BASE_DIR,'static')
STATIC_URL = '/static/'
STATICFILES_DIRS=     (os.path.join(BASE_DIR,'questions','static','css'),os.path.join(BASE_DIR,'questions','static','js'),)

I got this error message when i checked in my Javascript console - 127.0.0.1/:19 Resource interpreted as Stylesheet but transferred with MIME type application/x-css:

Share Improve this question edited Aug 23, 2015 at 9:15 asked Aug 23, 2015 at 7:20 sumit chansouliya 811 gold badge2 silver badges9 bronze badges

use {% load staticfiles %} at the top of your html page – Ajay Gupta Commented Aug 23, 2015 at 7:50
AjayGupta .I did that . My all Images are loading by same way only css and Js files are not loading. I am using Eclipse IDE for Django. – sumit chansouliya Commented Aug 23, 2015 at 7:54
where is your STATIC_URL pointing at? and are you running using django server or any other server like apache, nginx? – Ymartin Commented Aug 23, 2015 at 7:54
I am running my Project at localhost. STATIC_ROOT = os.path.join(BASE_DIR,'static') STATIC_URL = '/static/' STATICFILES_DIRS=(os.path.join(BASE_DIR,'questions','static','css'),os.path.join(BASE_DIR,'questions','static','js'),) – sumit chansouliya Commented Aug 23, 2015 at 7:56
are your files in some css and js directory? – Ajay Gupta Commented Aug 23, 2015 at 7:58

| Show 6 more ments

4 Answers 4

Sorted by: Reset to default 2

This is for project (mon) statics:

STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'static'),
)

And this is for your apps statics:

STATICFILES_FINDERS = (
    'django.contrib.staticfiles.finders.FileSystemFinder',
    'django.contrib.staticfiles.finders.AppDirectoriesFinder',
)

Then in template you can access it using:

{% load static %}

{# this is in project static dir == tip №1 == static/... #}

<script type="text/javascript" src="{% static ' js/bootstrap.min.js' %}"></script>
<link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet" type="text/css">



{# suppose your app name is `questions` == tip №2 == questions/static/questions/... #}    

<script type="text/javascript" src="{% static 'questions/js/some.js' %}"></script>
<link href="{% static 'questions/css/pro.css' %}" rel="stylesheet" type="text/css">

Try this :

<link href="{% static "css/pro.css" %} rel="stylesheet" type="text/css"/>

same applies for js.

You have given path for images as static "images/image_name.jpg" but missing the same for css and js files

I guess what you are missing is collectstatic

run this mand

python manage.py collectstatic

docs : https://docs.djangoproject./en/1.8/ref/contrib/staticfiles/

Hope this helps!

It was my problem too! but i solve it :

you should go to your project setting setting.pyand find STATIC_URL
note url which is in STATIC_URL then change it to the path of absolute static files for example my path is MySite/MyApp/static/My_App/'static files'
after that copy the path of your My_app to the STATIC_URL then it should work.

Note: you should insert your path in STATIC_URL with this format:

/file1/ or `/file1/file2/.../`

hope useful

Programmer puzzle solving

javascript - How to add Css and Js files in Django python - Stack Overflow

4 Answers 4

Articles related to this article

comment list (0)