如何让 Django 从我的 React 构建目录加载我的网站图标？

Question

我正在使用 Django 和 React 创建一个 Web 应用程序。当涉及到我的 React 开发服务器时，我的 favicon.ico 加载正常，但是当我构建文件时，我的 Django 开发服务器找不到并呈现我的图标，我不知道为什么。我试过重命名我的收藏夹图标并将文件类型更改为 .png。当我将收藏夹图标放入静态目录并将文件名从收藏夹图标更改为 "icon.ico" 之类的名称时，它就会正确加载。但是，我不能在我的静态目录中放置我的收藏夹图标，因为 CRA 在构建时不会将它复制到该目录中。它可能是一些小而简单的东西，所以我会向你们展示所有相关文件。感谢您的任何见解！

编辑：我尝试了 collectstatic ，但没有帮助

编辑 2：使用 {% load static %} 但这不起作用，因为我的收藏夹图标与我的 html 文件位于同一目录中。我还应该澄清一下，指向包含我的 html 文件和我的网站图标文件的 parent 目录的导入链接由于某种原因没有注册。

我的 build/index.html 中的导入：<link rel="shortcut icon" type="image/x-icon" href="./favicon.ico"/>

urls.py


from django.contrib import admin
from django.urls import include, path, re_path
from django.conf.urls import include, url
from backend import views
from django.views.generic.base import RedirectView

urlpatterns = [
    path('admin/', admin.site.urls),
    path('api/', include('backend.urls')),
    path(r'^api/<int:pk>$', include('backend.urls')),
    path(r'^api/<int:pk>$/', include('backend.urls')),
    url(r'^.*$', views.index),

]

我的 settings.py 静态设置：

STATIC_URL = '/static/'

STATICFILES_DIRS = [
    os.path.join(FRONTEND, 'build/static/'),

]

CORS_ORIGIN_WHITELIST = (
    'http://localhost:3000',
)

此外，如果问题可能出在另一个文件中，请告诉我

Answer 1

问题是 django url 路由无法访问 favicon.ico，因为 CRA 将它放在 /build 中，并且所有静态文件都是从 /build/static 提供的。

假设您还没有弹出，一个 hacky 解决方案是将 favicon.ico 复制到 package.json 脚本部分的构建步骤中的静态文件夹中：

"build": "react-scripts build && cp build/favicon.ico build/static/favicon.ico"

然后在 /public 中的 html 模板中，将 favicon.ico url 设置为

<link rel="shortcut icon" href="/static/favicon.ico">

而不是 %PUBLIC_URL%/favicon.ico。

如果您已经弹出 CRA，您可以更新您的 webpack 配置以将 favicon.ico 直接移动到 /build/static

如何让 Django 从我的 React 构建目录加载我的网站图标？

How do I get Django to load my favicon from my React build directory?

django

create-react-app

favicon