Search code examples
django-templatespython-3.5django-staticfilesdjango-1.10

Django 1.10 Templating/staticfiles not showing any images


I am trying to enable Django templating in 1.10 and it is not behaving correctly. Anything I have referenced to be called from the static files (./manage.py collectstatic) is not showing where referenced in the html.

I have it imported in my views:

from django.shortcuts import render, render_to_response
from django.http import HttpResponse, HttpResponseRedirect
from django.contrib.auth.forms import UserCreationForm
from django.template import loader
from django.contrib.auth.decorators import login_required
from .models import Question
from django.template.context_processors import csrf
from django.conf.urls.static import static

here is my urls.py

from django.conf.urls import include, url
from django.contrib import admin
from django.conf import settings
from django.conf.urls.static import static


urlpatterns = [
    url(r'^games/', include('games.urls')),
    url(r'^accounts/', include('allauth.urls')),
    url(r'^admin/', admin.site.urls),
]+static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

My settings.py

 STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR,"static")

and some examples from my base.html

    {% load static %}
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta name="description" content="Hosted IT services such as Remote Backup, Disaster Recovery, Hosted Private and Hosted Shared environments, Hosted VoIP Telephony, Connectivity, IT Support and Network Monitoring, Hardware Guaranteed Fix Maintenance, Software Asset Management, Global Purchasing Strategies, Financial Services and Procurement in general.">
  <title>Hosted IT | hosting experts providing straightforward solutions</title>
  <link rel="stylesheet" type="text/css" href="{% static 'css/jquery.fullpage.min.css' %}"/>
  <link rel="stylesheet" type="text/css" href="{% static '/css/hostedit.css' %}" />
    <script type='text/javascript' src="{% static 'js/headerscripts.js' %}"></script>
    <link rel="apple-touch-icon" sizes="57x57" href="{% static 'img/ico/apple-touch-icon-57x57.png' %}">
  <link rel="apple-touch-icon" sizes="60x60" href="{% static 'img/ico/apple-touch-icon-60x60.png' %}">
  <link rel="apple-touch-icon" sizes="72x72" href="{% static 'img/ico/apple-touch-icon-72x72.png' %}">

I have tried putting my files in games/static/games/img like the django documentation suggests. But I have also tried to work with /games/static/img but neither seem to work. Using the web inspect tool i get a few 404 errors on the called images and JS.

Is there something I am missing with 1.10 ?


Solution

  • You have issue in your settings file. Use that settings for static files.

    # Build paths inside the project like this: os.path.join(BASE_DIR, ...)
    BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
    
    INSTALLED_APPS = [
      'django.contrib.admin',
      'django.contrib.auth',
      'django.contrib.contenttypes',
      'django.contrib.sessions',
      'django.contrib.messages',
      'django.contrib.staticfiles', # it's is used for static files
    ]
    
    
    STATIC_URL = '/static/'
    STATIC_ROOT = os.path.join(os.path.dirname(BASE_DIR), 'static')
    
    STATICFILES_DIRS = (
        # os.path.join(os.path.dirname(BASE_DIR), 'static'),
        os.path.join(BASE_DIR, 'static'),
    )
    

    In your template you can load image like

    {% load staticfiles %}  # register static tag
    <img class="img-portfolio img-responsive" src="{% static 'img/portfolio-1.jpg' %}">
    

    This image should be available in that directory structure 'static/img/portfolio-1.jpg'.

    Urls.py should look like this.

    urlpatterns = [
       url(r'^admin/', admin.site.urls),
       url(r'^$', index, name='index'),
       url(r'^auths/', include('auths.urls')),
       url(r'^quiz/', include('quizes.urls'))
    ]
    

    please update your urls accordinlgy. This is just an example.