如何在Django中向网页添加CSS/图片？

Question

我把图片（"hi.png"）和CSS文件放在了这个路径：/home/user1/djangoblog/blog/static

在模板里，我写了这个代码：<img src="{{ STATIC_URL }}images/hi.png" />

我修改了settings.py文件，内容是：

STATIC_ROOT = ''
STATIC_URL = "/static/"

STATICFILES_DIRS = (
    "/home/user1/djangoblog/blog/static/",)

网页源代码显示的是：

<div><img src="/static/images/a.jpg" /></div>

如果在views.py里，这个图片就不会在网页上显示。

now = datetime.datetime.now()
#return render_to_response('current_datetime.html', {"foo": now}, context_instance=RequestContext(request))
t = loader.get_template('current_datetime.html')
c = Context({'foo': now})
return HttpResponse(t.render(c))

但如果在views.py里这样写，就能在网页上显示图片。

return render_to_response('current_datetime.html', {"foo": now}, context_instance=RequestContext(request))

看起来可能是HttpResponse或者RequestContext出了问题。我该怎么解决这个HttpResponse或RequestContext的问题呢？

Answer 1

我怀疑你的问题是因为在设置文件中没有添加静态文件的上下文处理器。这就是为什么你在放置 {{ STATIC_URL }} 的地方没有看到 /static/ 的原因。

解决方法很简单，只需要在你的 settings.py 文件中添加

'django.core.context_processors.static',

到上下文处理器的列表中（TEMPLATE_CONTEXT_PROCESSORS）。

更新

我在 TEMPLATE_CONTEXT_PROCESSORS 中添加了这个，但还是不行。– guru 3小时前

将 'django.core.context_processors.static' 添加到上下文处理器列表中确实解决了你的问题，因为现在你可以看到，它在模板中每次遇到 {{ STATIC_URL }} 时都会插入 STATIC_URL 的值。错误在于你把 STATIC_URL 的值改成了 "/home/user1/djangoblog/blog/static/"，这可能是因为你被这里的一些回答搞混了。

把 STATIC_URL 的值改回 '/static/'，所以那一行应该是

STATIC_URL = '/static/'

这样就能解决你的问题。

Django 模板会把变量里的内容直接放到模板中。它们不关心内容是什么或者代表什么。如果 STATIC_URL 的值是 /home/user1/djangoblog/blog/static/，那么它就会在每次看到 {{ STATIC_URL }} 时，老老实实地插入 /home/user1/djangoblog/blog/static/，这就是你看到的原因。

<img src="/home/user1/djangoblog/blog/static/images/a.jpg" />

每当它渲染包含 <img src="{{ STATIC_URL }}images/a.png" /> 的模板时，就会出现这个情况。

Answer 2

你需要更仔细地阅读静态文件的文档。

你需要用 STATIC_ROOT 来指定你的静态文件夹的绝对路径，并用 STATIC_URL 来设置这个文件夹在浏览器中可以访问的地址。你的主要静态文件夹绝对不应该放在 STATICFILES_DIRS 里。这个设置只是用来让你指定一些额外的文件夹，这些文件夹在运行 collectstatic 命令时会被处理。

一般来说，你永远不会直接使用你的实际静态文件夹。在开发阶段，Django 会从每个应用的 static 文件夹和 STATICFILES_DIRS 中的任何文件夹（不包括主要的 static 文件夹）提供文件。而在生产环境中，你需要运行 collectstatic 命令，然后设置你的主 web 服务器（比如 Apache、Nginx 等）来从 STATIC_ROOT 提供文件。Django绝对不会从主要的 static 文件夹（STATIC_ROOT）提供任何文件。