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

Question

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

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

编辑2：使用{% load static %}但这不起作用，因为我的图标与我的html文件位于同一目录中。我还应该澄清，由于某种原因，保存我的 html 文件和我的 favicon 文件的父目录的导入链接没有注册。

我的导入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