图像未在Django 1.8模板中显示

时间:2015-05-31 19:51:00

标签: django image static media

我想在名为index的Django应用程序中显示静态文件夹中的图像。但它在浏览器中显示图标,这意味着它无法在<img src=""/>中指定的路径中找到图像。这是我的目录结构:

|-- db.sqlite3
|-- images
|   |-- __init__.py
|   |-- __init__.pyc
|   |-- settings.py
|   |-- settings.pyc
|   |-- urls.py
|   |-- urls.pyc
|   |-- wsgi.py
|   `-- wsgi.pyc
|-- index
|   |-- admin.py
|   |-- admin.pyc
|   |-- __init__.py
|   |-- __init__.pyc
|   |-- migrations
|   |   |-- __init__.py
|   |   `-- __init__.pyc
|   |-- models.py
|   |-- models.pyc
|   |-- static
|   |   `-- index
|   |       `-- file2
|   |-- templates
|   |   `-- show.html
|   |-- tests.py
|   |-- urls.py
|   |-- urls.pyc
|   |-- views.py
|   `-- views.pyc
`-- manage.py

views.py

def show(request):
    return render(request, 'show.html', {})

urls.py

from django.conf.urls import url
from django.conf import settings
from django.conf.urls.static import static

from index import views

urlpatterns = [
    url(r'^show$', views.show),
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

show.html

{% load staticfiles %}
<img src="{% static "index/file2" %}" alt="test_image"/>

我试图关注this,但显然没有做好。任何帮助将不胜感激。

2 个答案:

答案 0 :(得分:2)

After a lot of trials, finally I got it with a combination of answers from Stackoverflow. Really it is not straightforward. Phew! I'm happy and smiling though. I've setup Django 1.8 on Windows with Apache and mod_wsgi (Xampp). 'vrsite' is my site. 'vrapp' is my app. The image finally showed from vrsite> vrsite > vrapp > static > vrapp >23-oracle.jpg My steps for getting the image displayed are below: 1. Directory structure: C:...\myvirtualwebenv27_1\xampp\htdocs\vrsite\manage.py <---root

vrsite

  -- manage.py
  -- static
          --media
  -- static_dirs
          -- css
          -- img
                -- 23-oracle.jpg
          -- js
  -- static_root
          -- admin
               -- css
               -- img
               -- js
          -- css
          -- img
                -- 23-oracle.jpg
          -- vrapp
                 --23-oracle.jpg
  -- vrsite
          -- __init__.py
          -- settings.py
          -- urls.py
          -- wsgi.py
          -- vrapp
                 -- migrations
                 -- static
                         -- vrapp
                                -- 23-oracle.jpg

                 -- templates
                         -- index.html
                 -- __init.py__
                 -- admin.py
                 -- models.py
                 -- tests.py
                 -- views.py

2. settings.py

import os

BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))

INSTALLED_APPS = (
'django.contrib.staticfiles',
    'vrsite.vrapp',
)

ROOT_URLCONF = 'vrsite.urls'

WSGI_APPLICATION = 'vrsite.wsgi.application'

STATIC_URL = '/static/'

STATIC_ROOT = os.path.join(BASE_DIR, 'static', 'static_root')
#STATIC_ROOT = 'static'

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

MEDIA_ROOT = os.path.join(BASE_DIR, 'static', 'media')

MEDIA_URL = '/media/'
  1. urls.py

    from django.conf.urls import patterns, include, url

    from django.contrib import admin
    from django.conf import settings
    from django.conf.urls.static import static
    
    urlpatterns = [
        url(r'^$', 'vrsite.vrapp.views.home'),
    ] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
    
  2. views.py

    from django.shortcuts import render

    from django.shortcuts import render_to_response

    def home(request):
    
            return render_to_response('index.html')
    
  3. index.html

< body >

{% load staticfiles %}

<img src="{% static "vrapp/23-oracle.jpg" %}" alt = "My image"/>

< /body >

  1. Run collect static as follows

    (myvirtualwebenv27_1) C:...\myvirtualwebenv27_1\xampp\htdocs\vrsite> C:...\myvirtualwebenv27_1\Scripts\python manage.py collectstatic

    You have requested to collect static files at the destination location as specified in your settings:

    C:\...\myvirtualwebenv27_1\xampp\htdocs\vrsite\static\static_root
    

    This will overwrite existing files! Are you sure you want to do this?

    Type 'yes' to continue, or 'no' to cancel: yes Copying C:...\myvirtualwebenv27_1\xampp\htdocs\vrsite\vrsite\vrapp\static\vrapp\23-oracle.jpg'

    1 static file copied to 'C:...\myvirtualwebenv27_1\xampp\htdocs\vrsite\static\static_root', 64 unmodified.

答案 1 :(得分:0)

我设置STATIC_ROOT = 'static',现在它会在网页上显示图像。