web-dev-qa-db-ja.com

Djangoテンプレートに画像ファイルを含めるにはどうすればよいですか？

私はDjangoが初めてで、「dubliners」と呼ばれる開発中の簡単なプロジェクトと「book」と呼ばれるアプリを通じて学習しようとしています。ディレクトリ構造は次のようになります。

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

各Webページのヘッダーに表示する必要があるJPGファイルがあります。ファイルはどこに保存すればよいですか？テンプレートを使用してタグを表示するには、タグにどのパスを使用する必要がありますか？さまざまな場所とパスを試しましたが、これまでのところ何も機能していません。

...

以下に投稿された回答をありがとう。ただし、画像への相対パスと絶対パスの両方を試しましたが、Webページに壊れた画像アイコンが表示されたままです。たとえば、ホームディレクトリに画像があり、テンプレートでこのタグを使用する場合：

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

画像は表示されません。ただし、Webページを静的なHTMLファイルとして保存すると、画像が表示されるため、パスは正しいです。 Djangoに付属するデフォルトのWebサーバーは、特定のパス上にある場合にのみ画像を表示しますか？

pythondjangodjango-templates
63
Tony

本番環境では、ホストからメディアファイルが保存されている場所を指すテンプレートから生成されたHTMLがあります。あなたのテンプレートは例えば

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

そして、そのディレクトリに関連するファイルがあることを確認するだけです。

開発中は別の問題です。 Djangoのドキュメントは、それをリンクしてここに入力するのがより効果的であることを簡潔かつ明確に十分に説明していますが、基本的にはディスク上の場所へのハードコードされたパスを持つサイトメディアのビューを定義します。

右 ここ 。

34
JosefAssad

これを試して、

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>" />
_

警告

気をつけて！ Context()を使用すると、_{{MEDIA_URL}}_に空の値が返されます。代わりにRequestContext()を使用する必要があります。

これが役立つことを願っています。

66
steve

あなたの質問はMEDIA_ROOTに保存されているファイルに関するものであることを理解していますが、そのタイプのコンテンツを作成する予定がない場合は、コンテンツを静的に保存できる場合があります。
これはまれなケースかもしれませんが、とにかく-サイトに大量の「今日の写真」があり、これらすべてのファイルがハードドライブにある場合はどうでしょうか。

その場合、そのようなコンテンツをSTATICに保存することに矛盾はありません。
そしてすべてが本当にシンプルになります：

静的

STATIC_ROOT Django=に保存されている静的ファイルにリンクするには、静的テンプレートタグが付属しています。RequestContextを使用しているかどうかに関係なく、これを使用できます。

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

Official Django 1.4 documentation /組み込みテンプレートタグとフィルター からコピー

18
Andrey Belyak

私はこれに2日間しっかりと取り組んでいるので、自分のソリューションも共有したいと思っただけです。 26/11/10の時点で、現在のブランチは1.2.Xであるため、次の要素を持っている必要がありますsettings.py：

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

*（MEDIA_ROOTはファイルがある場所であり、MEDIA_URLはテンプレートで使用する定数であることに注意してください。）*

次に、あなたの中にrl.py以下を置きます：

import settings

# stuff

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

次に、あなたのHTMLで使用することができます：

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

Django=が機能する方法（私が理解できる限り：

  1. Htmlファイルでは、MEDIA_URLをsetting.pyで見つかったMEDIA_URLパスに置き換えます
  2. Url.pyを検索してMEDIA_URLに一致するものを見つけ、一致するものが見つかった場合（r '^ static /（？P。）$' *はhttp： // localhost：8000/static /）MEDIA_ROOTでファイルを検索し、ロードします
11
Robert

プロジェクトルートの下の/ mediaディレクトリ

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}), )

テンプレート

<img src="{{MEDIA_URL}}/image.png" >
9
Omar Giorgetti

開発中
アプリフォルダーでフォルダー名「static」を作成し、そのフォルダーに画像を保存します。
画像を使用するには：

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

本番環境：
開発時と同じように、Djangoのパラメーターをいくつか追加するだけです。

  1. 加える settings.py
    STATIC_ROOT = os.path.join(BASE_DIR, "static/")（これにより、すべてのアプリの静的ファイルが保存されるフォルダーが準備されます）

  2. アプリが_INSTALLED_APPS = ['myapp',]_にあることを確認してください

  3. terminall runコマンドpython manage.py collectstatic（これにより、INSTALLED_APPSに含まれるすべてのアプリから静的ファイルのコピーがグローバル静的フォルダー-STATIC_ROOTフォルダーに作成されます）

    それがすべてDjango必要です。この後、静的フォルダーを使用するための事前設定を行うためにWebサーバー側の設定を行う必要があります。たとえば、構成ファイルのApache2でhttpd.conf（windowsの場合）またはsites-enabled/000-default.conf。（ linuxのサイト仮想ホスト部分の下に）追加：

    エイリアス\ static "path_to_your_project\static"

    すべての付与が必要

    そしてそれだけです

8
FirePower

ファイルがモデル内のモデルフィールドである場合、テンプレートタグで「.url」を使用して画像を取得することもできます。

例えば。

これがモデルの場合：

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

ビューのコンテキストでモデルを渡します。

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

テンプレートには次のものがあります。

<img src = "{{foo.bar.url}}">
6
Pstrazzulla

きみの

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

uRLがfile:///home/...であると仮定するため、ディスクから読み取られたHTMLファイルに対して機能します。ただし、Webサーバーから提供されるファイルの場合、URLはhttp://www.yourdomain.com/home/tony/london.jpgのようなものになります。

静的ファイルの提供方法と配置場所については、この document を確認してください。基本的に、Djangoの開発サーバーを使用している場合、メディアファイルが存在する場所を彼に見せ、urls.pyがそれらのファイルを提供するようにします（たとえば、/static/ urlプレフィックスを使用して） 。

次のようなものをurls.pyに入れる必要があります。

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

実稼働環境では、これをスキップして、httpサーバーを作成したい（Apache、lighttpdなど）静的ファイルを提供します。

5
kender

別の方法：

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

これには、メディアフォルダーを静的フォルダーのサブディレクトリに移動する必要があります。

次に、テンプレートで次を使用できます。

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

うまくいかないさまざまな方法を試しましたが、これはうまくいきました。あなたにもうまくいくことを願っています。ファイル/ディレクトリは次の場所にある必要があります。

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/'

例：

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

体内

{% load staticfiles %}

//for image

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

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

Fb.pngが/home/project/app/static/image/fb.png内にある場合

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

Djangoプロジェクトでオンライン画像のアドレスを指定すると、それは機能します。それは私のために働いています。

0
Bhaskar arya