Wie füge ich Bilddateien in Django-Vorlagen ein?

73

Ich bin neu in Django und versuche es durch ein einfaches Projekt namens "Dubliner" und eine App namens "Buch" zu lernen. Die Verzeichnisstruktur sieht folgendermaßen aus:

dubliners/book/  [includes models.py, views.py, etc.]
dubliners/templates/book/

Ich habe eine JPG-Datei, die in der Kopfzeile jeder Webseite angezeigt werden muss. Wo soll ich die Datei speichern? Welchen Pfad sollte ich für das Tag verwenden, um es mithilfe einer Vorlage anzuzeigen? Ich habe verschiedene Orte und Wege ausprobiert, aber bisher funktioniert nichts.

...

Vielen Dank für die unten stehende Antwort. Ich habe jedoch sowohl relative als auch absolute Pfade zum Bild ausprobiert und es wird immer noch ein fehlerhaftes Bildsymbol auf der Webseite angezeigt. Wenn ich beispielsweise ein Bild in meinem Ausgangsverzeichnis habe und dieses Tag in meiner Vorlage verwende:

<img src="/home/tony/london.jpg" />

Das Bild wird nicht angezeigt. Wenn ich die Webseite jedoch als statische HTML-Datei speichere, werden die Bilder angezeigt, sodass der Pfad korrekt ist. Vielleicht zeigt der mit Django gelieferte Standard-Webserver Bilder nur an, wenn sie sich auf einem bestimmten Pfad befinden?

python  django  django-templates 
— Tony
quelle

Antworten:

42

In der Produktion wird nur der HTML-Code aus Ihrer Vorlage generiert, der darauf verweist, wo auf dem Host Mediendateien gespeichert sind. So wird Ihre Vorlage nur zum Beispiel haben

<img src="../media/foo.png">

Und dann stellen Sie einfach sicher, dass das Verzeichnis mit den entsprechenden Dateien vorhanden ist.

während der Entwicklung ist ein anderes Thema. Die Django-Dokumente erklären es kurz und deutlich genug, dass es effektiver ist, dort zu verlinken und es hier einzugeben. Grundsätzlich definieren Sie jedoch eine Ansicht für Site-Medien mit einem fest codierten Pfad zum Speicherort auf der Festplatte.

Genau hier .

— JosefAssad
quelle
31
Wahrscheinlich ist es besser, <img src = "{{MEDIA_URL}} foo.png /> zu verwenden, als den Speicherort Ihres Mediums fest zu codieren.
— Randlet
Ignorieren Sie das vorherige, ich verstehe jetzt - ich habe die Seite über das Bereitstellen statischer Dateien gelesen, mit denen Sie verknüpft sind.
— Tony
warum nicht nur wir <img src = "{{book.image.url}}"> wobei book der Name des Objekts ist. Auf diese Weise müssen Sie den Dateinamen nicht kennen und {{MEDIA_URL}} nicht hinzufügen.
— SudoKid
70

Versuche dies,

settings.py

# typically, os.path.join(os.path.dirname(__file__), 'media')
MEDIA_ROOT = '<your_path>/media'
MEDIA_URL = '/media/'

urls.py

urlpatterns = patterns('',
               (r'^media/(?P<path>.*)$', 'django.views.static.serve',
                 {'document_root': settings.MEDIA_ROOT}),
              )

.html

<img src="{{ MEDIA_URL }}<sub-dir-under-media-if-any>/<image-name.ext>" />

Vorbehalt

In acht nehmen! Mit using Context()erhalten Sie einen leeren Wert für {{MEDIA_URL}}. Sie müssen RequestContext()stattdessen verwenden.

Ich hoffe, das wird helfen.

— Adeel Ansari
quelle
2
Vielen Dank dafür! Endlich die einzige Antwort, die mir tatsächlich geholfen hat!
— Jacques Bosch
Was ist {'document_root': settings.MEDIA_ROOT}, ist das der Kontext, der für die aufgerufene Funktion bereitgestellt wird?
— AllTradesJack
18

Ich verstehe, dass Ihre Frage sich auf in MEDIA_ROOT gespeicherte Dateien bezog, aber manchmal kann es möglich sein, Inhalte statisch zu speichern, wenn Sie nicht mehr planen, Inhalte dieses Typs zu erstellen.
Möglicherweise ist dies ein seltener Fall, aber trotzdem - wenn Sie eine große Anzahl von "Bildern des Tages" für Ihre Site haben - und alle diese Dateien sich auf Ihrer Festplatte befinden?

In diesem Fall sehe ich keinen Widerspruch, um einen solchen Inhalt in STATIC zu speichern.
Und alles wird ganz einfach:

statisch

Zum Verknüpfen mit statischen Dateien, die in STATIC_ROOT gespeichert sind, wird Django mit einem statischen Vorlagen-Tag geliefert. Sie können dies unabhängig davon verwenden, ob Sie RequestContext verwenden oder nicht.

{% load static %} <img src="{% static "images/hi.jpg" %}" alt="Hi!" />

kopiert aus der offiziellen Django 1.4-Dokumentation / Integrierte Vorlagen-Tags und Filter

— Andrey Belyak
quelle
12

Ich habe zwei solide Tage damit verbracht, daran zu arbeiten, also dachte ich nur, ich würde auch meine Lösung teilen. Ab dem 26.11.10 ist der aktuelle Zweig 1.2.X, was bedeutet, dass Sie Folgendes in Ihrer settings.py haben müssen :

MEDIA_ROOT = "<path_to_files>" (i.e. /home/project/django/app/templates/static)
MEDIA_URL = "http://localhost:8000/static/"

* (Denken Sie daran, dass sich in MEDIA_ROOT die Dateien befinden und MEDIA_URL eine Konstante ist, die Sie in Ihren Vorlagen verwenden.) *

Dann platzieren Sie in Ihrer url.py Folgendes:

import settings

# stuff

(r'^static/(?P<path>.*)$', 'django.views.static.serve',{'document_root': settings.MEDIA_ROOT}),

Dann können Sie in Ihrem HTML verwenden:

<img src="{{ MEDIA_URL }}foo.jpg">

Die Art und Weise, wie Django funktioniert (soweit ich das beurteilen kann, ist:

  1. In der HTML-Datei wird MEDIA_URL durch den in settings.py gefundenen Pfad MEDIA_URL ersetzt
  2. Es sucht in url.py nach Übereinstimmungen für die MEDIA_URL und sucht dann, wenn es eine Übereinstimmung findet (wie r '^ static / (? P. ) $' * Bezieht sich auf http: // localhost: 8000 / static / ) für die Datei in der MEDIA_ROOT und lädt sie dann
— Robert
quelle
10

In der Entwicklung
Erstellen Sie in Ihrem App-Ordner den Ordnernamen 'static' und speichern Sie Ihr Bild in diesem Ordner.
So verwenden Sie das Bild:

<html>
    <head>
       {% load staticfiles %} <!-- Prepare django to load static files -->
    </head>
    <body>
        <img src={% static "image.jpg" %}>
    </body>
</html>

In der Produktion:
Alles wie in der Entwicklung, fügen Sie einfach ein paar weitere Parameter für Django hinzu:

  1. add in settings.py
    STATIC_ROOT = os.path.join(BASE_DIR, "static/") (dies bereitet einen Ordner vor, in dem statische Dateien aller Apps gespeichert werden)

  2. Stellen Sie sicher, dass Ihre App in ist INSTALLED_APPS = ['myapp',]

  3. in terminall Startbefehl Python manage.py collectstatic (dies wird Kopie der statischen Dateien aus allen Anwendungen, die in INSTALLED_APPS globalen statischen Ordner machen - STATIC_ROOT Ordner)

    Das ist alles , was Django Notwendigkeit, danach müssen Sie einige Web - Server - Seite Setup zu machen machen Voraussetzungen für die Verwendung eines statischen Ordners. ZB in apache2 in der Konfigurationsdatei httpd.conf (für Windows) oder sites-enabled / 000-default.conf. (unter Virtual Site-Teil der Site für Linux) Hinzufügen:

    Alias ​​\ static "path_to_your_project \ static"

    Benötigen Sie alles gewährt

    Und das ist alles

— FirePower
quelle
1
Dies ist eine unvollständige Antwort. Um statische Dateien in Ihren Vorlagen verwenden zu können, müssen die Einstellungen in der settings.pyDatei ordnungsgemäß konfiguriert werden. Lesen Sie die Dokumente
— Nrzonline
Die Standardeinstellung in den Einstellungen ist die Verwendung eines statischen Ordners zum Importieren statischer Dateien (STATIC_URL = '/ static /')
— FirePower
Ab Django 3 sollte es sein {% load static %}.
— Matheburg
9

Wenn Ihre Datei ein Modellfeld innerhalb eines Modells ist, können Sie auch ".url" in Ihrem Vorlagen-Tag verwenden, um das Bild abzurufen.

Zum Beispiel.

Wenn dies Ihr Modell ist:

class Foo(models.Model):
    foo = models.TextField()
    bar = models.FileField(upload_to="foo-pictures", blank = True)

Übergeben Sie das Modell in Ihren Ansichten im Kontext.

return render (request, "whatever.html", {'foo':Foo.objects.get(pk = 1)})

In Ihrer Vorlage könnten Sie haben:

<img src = "{{foo.bar.url}}">
— Pstrazzulla
quelle
9

Verzeichnis / media unter dem Projektstamm

Settings.py

BASE_DIR = os.path.dirname(os.path.dirname(__file__))
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

urls.py

    urlpatterns += patterns('django.views.static',(r'^media/(?P<path>.*)','serve',{'document_root':settings.MEDIA_ROOT}), )

Vorlage

<img src="{{MEDIA_URL}}/image.png" >
— Omar Giorgetti
quelle
5

Ihre 

<img src="/home/tony/london.jpg" />

funktioniert für eine HTML-Datei, die von der Festplatte gelesen wird, da davon ausgegangen wird, dass die URL lautet file:///home/.... Für eine Datei, die von einem Webserver bereitgestellt wird, wird die URL wie folgt: Dies http://www.yourdomain.com/home/tony/london.jpgkann eine ungültige URL sein und nicht das, was Sie wirklich meinen.

In diesem Dokument erfahren Sie, wie Sie Ihre statischen Dateien bereitstellen und wo sie abgelegt werden . Wenn Sie den Entwicklungsserver von django verwenden, möchten Sie ihm grundsätzlich den Ort anzeigen, an dem sich Ihre Mediendateien befinden, und dann urls.pydiese Dateien bereitstellen (z. B. mithilfe eines /static/URL-Präfixes).

Sie müssen so etwas in Ihre urls.py:

(r'^site_media/(?P<path>.*)$', 'django.views.static.serve',
    {'document_root': '/path/to/media'}),

In der Produktionsumgebung möchten Sie dies überspringen und Ihren http-Server ( Apache , LightTPD usw.) dazu bringen, statische Dateien bereitzustellen .

— Kender
quelle
3

Ein anderer Weg, es zu tun:

MEDIA_ROOT = '/home/USER/Projects/REPO/src/PROJECT/APP/static/media/'
MEDIA_URL = '/static/media/'

Dazu müssten Sie Ihren Medienordner in ein Unterverzeichnis eines statischen Ordners verschieben.

Dann können Sie in Ihrer Vorlage Folgendes verwenden:

<img class="scale-with-grid" src="{{object.photo.url}}"/>
— Stephen Tanner
quelle
2

Ich habe verschiedene Methoden ausprobiert, es hat nicht funktioniert. Aber das hat funktioniert. Ich hoffe, es wird auch für Sie funktionieren. Die Datei / das Verzeichnis muss sich an folgenden Speicherorten befinden:

projec / your_app / templates project / your_app / static

settings.py

import os    
PROJECT_DIR = os.path.realpath(os.path.dirname(_____file_____))
STATIC_ROOT = '/your_path/static/'

Beispiel:

STATIC_ROOT = '/home/project_name/your_app/static/'    
STATIC_URL = '/static/'    
STATICFILES_DIRS =(     
PROJECT_DIR+'/static',    
##//don.t forget comma    
)
TEMPLATE_DIRS = (    
 PROJECT_DIR+'/templates/',    
)

proj / app / templates / filename.html

im Körper

{% load staticfiles %}

//for image

img src="{% static "fb.png" %}" alt="image here"

//note that fb.png is at /home/project/app/static/fb.png

Wenn sich fb.png in /home/project/app/static/image/fb.png befand, dann 

img src="{% static "images/fb.png" %}" alt="image here"
— user2458167
quelle
0

Wenn Sie in Ihrem Django-Projekt die Adresse des Online-Bildes angeben, funktioniert dies. das funktioniert bei mir. Du solltest einen Schuss machen.

— John Collins
quelle
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.