web-dev-qa-db-ja.com

django）で静止画像を正しく指す方法

画像をレンダリングするテンプレートがあります。

{% load staticfiles %}

<img src="{% static "img/logo.png" %}" alt="My image"/>

画像のリンクが壊れていますが、次のことを示しています。

localhost/static/img/logo.png

この画像を正しく表示するには、static_root、static_url、およびSTATICFILES_DIRSに設定する必要のある値は何ですか？

これは私のディレクトリ構造です：

myprojectname（トップレベル）

--- myprojectname

--- --- myproectname

- - - - - - 設定

--- --- --- --- base.py（setting.py）

------静的

--- --- --- img

これは、設定での静的構成です。

STATIC_ROOT = '/Users/myuser/myprojectname/myprojectname'
STATIC_URL = '/static/'

STATICFILES_DIRS = (
    #normpath(join(SITE_ROOT, 'static')),
    os.path.join(BASE_DIR, "static"),
    '/Users/myuser/myprojectname/myprojectname/static',
)

これはそれが示すものです： enter image description here

私はすでにcollectstaticを実行しましたが、これは機能しません。

djangodjango-templatesdjango-staticfilesdjango-settings
11
Atma

静的ファイルはDjangoで混乱する可能性があります。できるだけ簡単に説明しようと思います...

_STATIC_ROOT_これは、静的ファイルを提供するディレクトリですproduction。

_STATICFILES_DIRS_これは、静的ファイルを提供するディレクトリですdevelopment。

STATIC_ROOTとSTATICFILES_DIRSは同じディレクトリを指すことはできません。

Djangoは高度にモジュール化されたフレームワークです。一部のアプリケーションモジュールには、独自のテンプレート、CSS、画像、JavaScriptが含まれています。 Djangoadminはそのようなアプリの1つです。 Djangoは、開発用と本番用の静的ファイルに異なるディレクトリを使用して作成するアプリケーションにこのモジュール性を拡張します。

_DEBUG = True_で_Django.core.staticfiles_を_INSTALLED_APPS_に含めた場合、Djangoは_STATICFILES_DIRS_タプルにあるファイルを_STATIC_URL_を使用して提供します開始点としてのパス。

本番環境では、この責任はNginx、Apache、CloudFrontなどに与えられる必要があります。_DEBUG = False_の場合、Djangoは静的ファイルを自動的に提供しません。

実行する場合：

_$ python manage.py collectstatic
_

STATICFILES_DIRSで指定されたファイルは、デプロイされるSTATIC_ROOTにコピーされます。

だから、あなたの質問に答えるために、私は次のことをします：

開発中の静的ファイルを保存するための別のディレクトリを作成し、そのパスをSTATICFILES_DIRSに追加します。私は通常、このフォルダーを「静的アセット」と呼びます。既存の「静的」ディレクトリと同じレベルに配置できます。

STATIC_ROOTを既存の「静的」ディレクトリへのパスに設定します。

スクリーンショットで404を返すパスをよく見ると、画像パスは/static/img/logo.pngとして指定されていますが、画像のディレクトリは/ static/image /です。

したがって、画像パスを再確認して、正しいディレクトリを指していることを確認してください。

25
Brandon

Settings.pyが存在するプロジェクトのルートにフォルダ「staticfiles」を作成します

Staticfilesでは、この方法で実行できます。

  • cSS
  • js
  • 画像

Settings.py

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

STATICFILES_DIRS = (
                os.path.join(PROJECT_DIR,'staticfiles'), # if your static files folder is named "staticfiles"
)
TEMPLATE_DIRS = (
                os.path.join(PROJECT_DIR,'template'), # if your static files folder is named "template"
)

Base.htmlで

<link rel="stylesheet" type="text/css" href="{% static 'css/demo.css' %}" /> 

<script type="text/javascript" src="{% static 'js/jquery.min.js' %}"></script>

Base.htmlを含む他のテンプレートファイル

{% extends "base.html" %}
{% load static %}


<script type="text/javascript" src="{% static 'js/jquery.min.js' %}"></script>


<div id="yourID" class="yourClass">
    <img src="{% static "images/something.gif" %}" alt="something" >
</div>
6
4dgaurav

開発モードの場合は、1行だけ定義します。

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

STATIC_ROOT = '/ Users/myuser/myprojectname/myprojectname'を定義する必要はありません

[〜＃〜]または[〜＃〜]

STATICFILES_DIRS as BASE_DIR

したがって、作業ソリューションは次のとおりです。

STATIC_URL = '/static/'

STATICFILES_DIRS = ( os.path.join('static'), )
0
Praveen Yadav