Django + React 媒体文件服务问题咨询：文件存放位置与React引用路径配置

我来帮你梳理清楚这个问题，其实核心是搞懂Django静态文件和媒体文件的分工，以及React打包后资源路径和Django路由的对应关系。

先分析你当前的问题根源 #

你把图片放在build/img，在React开发服务器（localhost:3000）能正常访问，是因为React dev server默认会托管整个build目录（开发时是public目录），所以/img/logo.jpeg能被找到。但Django的路由只处理两种路径：

1. /static/开头的请求：对应你配置的STATICFILES_DIRS里的build/static目录
2. /media/开头的请求：对应MEDIA_ROOT的media目录

而/img/开头的路径不在Django的urlpatterns里，自然会返回404。

方案1：把项目静态资源（比如logo）归为Django静态文件（推荐） #

如果这张logo是项目自带的、不会动态变化的资源，应该归类为静态文件，按照以下步骤调整：

1. 调整React中的图片存放位置 #

在React项目的public目录下创建static/img文件夹，把logo.jpeg放进去。执行npm run build后，图片会被复制到build/static/img，正好落在Django配置的STATICFILES_DIRS指向的目录里。

2. React中正确引用图片 #

有两种靠谱的写法：

• 写法一：用import导入（更推荐，支持缓存哈希）
  这种方式Webpack会自动处理路径，打包后生成带哈希的文件名，避免缓存问题：

  import logo from './static/img/logo.jpeg';
  // 注意：根据你的组件所在路径调整相对路径
  <img src={logo} alt="站点Logo" />
  

• 写法二：直接写绝对路径
  如果你不想用import，也可以直接写基于Django STATIC_URL的绝对路径：

  <img src="/static/img/logo.jpeg" alt="站点Logo" />
  

3. 验证Django配置 #

你当前的settings.py静态配置已经正确，无需修改：

STATIC_URL = '/static/'
STATICFILES_DIRS = [ os.path.join(BASE_DIR, 'build/static'), ]
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
STATICFILES_STORAGE = 'whitenoise.storage.CompressedManifestStaticFilesStorage'

重启Django服务后，访问http://127.0.0.1:8000/static/img/logo.jpeg就能看到图片了。

方案2：把图片作为媒体文件存放（适合用户上传的动态内容） #

如果这张图片是用户上传的（不是项目自带的静态资源），就用Django的媒体文件机制：

1. 存放图片到Django的media目录 #

在项目根目录创建media文件夹（和settings.py里的MEDIA_ROOT对应），把logo.jpeg放进去。

2. React中引用媒体文件路径 #

直接用Django配置的MEDIA_URL作为前缀：

<img src="/media/logo.jpeg" alt="Logo" />

3. 确认Django媒体路由配置 #

你当前的urls.py已经配置了DEBUG模式下的媒体路由，没问题：

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

⚠️ 注意：生产环境下不能用Django的static视图处理媒体文件，需要用Nginx/Apache等服务器直接托管MEDIA_ROOT目录。

总结一下 #

• 项目固定静态资源（logo、图标、全局样式图等）：选方案1，放到React public/static下，通过/static/xxx路径访问。
• 用户上传的动态内容：选方案2，放到Django media目录，通过/media/xxx路径访问。

内容的提问来源于stack exchange，提问作者penk