无法在 Django 中显示静态图像和加载 CSS答案

【问题标题】：Unable to display static images and load CSS in Django无法在 Django 中显示静态图像和加载 CSS
【发布时间】：2020-04-02 05:45:24
【问题描述】：

使用pycharm 2019.2.5，蟒蛇3.7， Django 2.2.5，我正在通过导入模板并通过 django 为其创建应用程序来创建网站，但我无法让任何静态文件正常工作。当我运行开发服务器时，没有字体/css/js/images 显示。我也无法从我的 HTML 文件中导入谷歌字体。我已阅读所有答案，并发布了我知道的相关数据。这似乎是一个相当普遍的问题，我已经尝试了他们所有的解决方案。如果您需要更多数据，请告诉我。

YSMR       *edited to add. #This is my top-level project created in pycharm.
  YSMR     
    \blog
    \contact
    \schedule
    \sendemail
    \static
       \css   # I plan on adding namespacing for this later
       \fonts
       \js 
       images....    
    \templates
       \index.html
       additional templates...
    __init__.py
    settings.py
    urls.py
    views.py
    wsgi.py

index.html 如下。我可以查看该文件，但同样，嵌入的静态文件和字体不执行。我在下面加载的前几行。

{% load static %}
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>YSMR</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&display=swap" rel="stylesheet">

    <link href="https://fonts.googleapis.com/css?family=EB+Garamond:400,400i,500,500i,600,600i,700,700i&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="{% static "css/open-iconic-bootstrap.min.css" %}">
    <link rel="stylesheet" href="{% static "css/animate.css" %}">

Settings.py

BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))

ENV_PATH = os.path.abspath(os.path.dirname(__file__))

STATIC_ROOT = os.path.join(ENV_PATH, '/static/')  #I've tried to change 'static' to something else, but I get an 'unresolved reference' error when I do.

STATIC_URL = '/static/'

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "YSMR/static"), #I get an 'unresolved reference "static"' when I remove the YSMR
]

当我从 STATICFILES_DIRS 路径中删除 YSMR 时，我收到“未解析的引用‘静态’”警告

另外，django.contrib.staticfiles 包含在 INSTALLED_APPS 中

提前致谢。

【问题讨论】：

你为什么使用静态作为<link href="{% static 'https://fonts.googleapis.com/css?family=EB+Garamond:400,400i,500,500i,600,600i,700,700i&display=swap' %}" rel="stylesheet"> 显然这个文件在网络上是动态的。
将os.path.join(BASE_DIR, "YSMR/static") 更改为os.path.join(BASE_DIR, "static")
我已尝试删除 STATICFILES_DIRS 中的 YSMR，但出现“未解决的参考”错误。发布更新以反映这一点。 @furkanayd 这只是模板中包含的 URL。我相信你很清楚。不如我。建议？
您正在静态目录中搜索名称为“fonts.googleapis.com/…”的文件，建议删除代码中的 {% static ... %} 部分
啊，我明白你的意思了@furkanayd，谢谢！更新。我已经运行了 collectstatic 命令。我在pycharm中建立了一个项目叫YSMR，然后是原文件路径。为了清楚起见，我将对其进行更新。我认为这可能是个问题。

标签： python html css django pycharm

【解决方案1】：

如下更改您的设置并尝试：

BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
STATIC_URL = '/static/'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "static"),
]

STATIC_ROOT = os.path.join(os.path.dirname(BASE_DIR), "static_cdn")
MEDIA_URL = "/media/"
MEDIA_ROOT = os.path.join(os.path.dirname(BASE_DIR), "media_cdn")

还要确保将这些行添加到主 url 文件中。

if settings.DEBUG:
    urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

【讨论】：

请更新您的答案，因为上述目录中没有“static_cdn”。所以用“static”替换“static_cdn”
当你运行collectstatic命令时，如果它不存在就会被创建，实际上在开发过程中不需要它
好的，遵循docs.djangoproject.com/en/3.0/howto/static-files 的简单规则虽然不需要提及static_cdn
它是用来学习的，所以你可以看到在本地机器上运行 collectstatic 命令会发生什么

【解决方案2】：

如下更改您的设置并尝试：

BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "app_name/static_root"), 
]
STATIC_ROOT = os.path.join(os.path.dirname(BASE_DIR), "app_name/static")
MEDIA_URL = "/media/"
MEDIA_ROOT = os.path.join(os.path.dirname(BASE_DIR), "media")

还要确保将这些行添加到主 url 文件中。

if settings.DEBUG:
    urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

【讨论】：