-2

I have the following CSS code for my navigation bar:

#footer-navigation {
  background: #1841c8 url('../images/nav_background.gif');
  height: 40px;
  padding: 0 0 0 20px;
}

However, when I launch my local development server, it gives me the following even though the image exists in that location:

"GET /images/nav_background.gif HTTP/1.1" 404 1795

I am running Django 1.3.1, and I am using django.views.static.serve.

ArKitect
  • 87
  • 3
  • 7
  • 1
    im pretty sure the image is not on /images/nav_background.gif then... – meo Nov 05 '11 at 21:08
  • I missed that you were getting a 404 when you request the image. If you go to localhost:8000/images/nav_background.gif does the image show up? – Daniel Nill Nov 05 '11 at 22:16
  • I checked it and it doesn't show up. It's a naming error. The filename in the images folder had a "-" instead of a "_". – ArKitect Nov 05 '11 at 22:58

2 Answers2

3
"GET /images/nav_background.gif HTTP/1.1" 404 1795

The image you want to use is not found. I suggest you do follow these steps:

You can try these steps:

  1. open your settings.py and

    • add this at the first line of your file: 

      import os.path

    • change your STATIC_ROOT's value to:

      STATIC_ROOT = os.path.join(PROJECT_DIR, 'static/')

    • change your STATIC_URL's value to:

      STATIC_URL = '/static/'

  2. create a folder named "static" in your project root.

  3. create a folder for your static files like css, javascript and etc. I recommend you use a different folder for different types of files.

  4. open the urls.py of your project

    • add this to your imports: import settings

    • add this to the url patterns:

      (r'(?:.*?/)?(?P<path>(css|jquery|jscripts|images)/.+)$', 'django.views.static.serve', {'document_root': settings.STATIC_ROOT }),

    NOTE: In this example, there are folders named css, jquery, jscripts and images inside my static folder.

  5. In your template add this:

for css files: (in this example, default.css is the name of the css file)

<link href="/{{ STATIC_ROOT }}css/default.css" rel="stylesheet" type="text/css" media="all" />

for javascript:

<script type="text/javascript" src="/{{ STATIC_ROOT }}jquery/jquery.js"></script>

then change your code to this:

#footer-navigation {
background: #1841c8 url(images/nav_background.gif);
height: 40px;
padding: 0 0 0 20px;
                   }
Flexo
  • 87,323
  • 22
  • 191
  • 272
Amazing Angelo
  • 1,658
  • 2
  • 13
  • 8
  • Note that in Django11, point 4 will not work, as `'django.views.static.serve'` is not allowed. Instead do: `from django import views as django_views` and `url(r'(?:.*?/)?(?P(css|jquery|jscripts|images)/.+)$', django_views.static.serve, {'document_root': settings.STATIC_ROOT }),` – J0ANMM Jul 31 '17 at 12:07
1

try setting MEDIA_ROOT in your settings to where the image lives and then use

{{ MEDIA_URL }}nav_background.gif

EDIT:

Jakub Gocławski is right. It would appear your issue is that the image does not exist where you think it exists. If you're still having a problem let us know what you get when you visit localhost:8000/< the path to the image > .

Daniel Nill
  • 5,539
  • 10
  • 45
  • 63