如何正确指向django中的静态图像

Question

我有一个渲染图像的模板:

{% 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',
)

这就是它所显示的:

我已经完成了一个收集站,这不起作用.

Answer 1

Django中的静态文件可能会令人困惑.我会尽可能简单地解释一下......

STATIC_ROOT 这是您应该在生产中提供静态文件的目录.

STATICFILES_DIRS 这是您应该在开发中提供静态文件的目录.

STATIC_ROOT和STATICFILES_DIRS不能指向同一目录.

Django是一个高度模块化的框架.一些应用程序模块包含自己的模板,css,图像和JavaScript.Django管理员就是这样一个应用程序.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 /

因此,仔细检查您的图像路径,以确保您指向正确的目录.

Answer 2

在项目的根目录中将settings.py存在的文件夹设为“ staticfiles”

在staticfile中，您可以采用这种方式。

• 的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>