React+Django项目图片加载失败求助，求示例代码

我之前也遇到过一模一样的问题——webpack打包完图片后，访问图片URL居然返回了首页，折腾了好一阵才搞定。本质原因就是webpack输出的静态资源路径和Django的静态资源配置不匹配，导致Django无法正确识别图片请求。下面是完整的解决方案和示例代码：

第一步：调整webpack配置，让资源输出到Django能识别的目录 #

首先要让webpack把打包后的图片（以及其他静态资源）输出到Django的静态文件目录下，同时配置好公共访问路径。假设你的webpack配置文件是webpack.config.js，修改如下：

const path = require('path');

module.exports = {
  // 其他原有配置（比如entry、babel-loader等）...
  output: {
    // 把打包后的资源输出到Django项目的static/bundles目录
    path: path.resolve(__dirname, 'project/static/bundles/'),
    // 静态资源的公共访问前缀，Django会用这个路径来定位资源
    publicPath: '/static/bundles/'
  },
  module: {
    rules: [
      // 新增图片处理规则，确保webpack能正确打包图片资源
      {
        test: /\.(jpeg|png|gif|svg)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              // 给图片加上哈希后缀，避免浏览器缓存旧资源
              name: '[name].[hash:8].[ext]',
              // 图片输出到bundles下的images子目录
              outputPath: 'images/'
            }
          }
        ]
      }
      // 其他loader配置（比如babel-loader处理JSX）...
    ]
  }
};

第二步：配置Django的静态资源设置 #

修改project/settings.py中的静态资源相关配置，让Django能找到webpack输出的资源：

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

# 静态资源URL前缀
STATIC_URL = '/static/'
# 开发环境下静态资源的查找目录
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'project/static'),
]
# 生产环境收集静态资源的根目录（开发环境暂时用不到，但建议配置）
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')

# 确保django-webpack-loader的配置正确（如果你用了这个插件）
WEBPACK_LOADER = {
    'DEFAULT': {
        'BUNDLE_DIR_NAME': 'bundles/',
        'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats.json'),
    }
}

第三步：更新Django的URL路由，让静态资源能被正确访问 #

在project/urls.py中添加静态资源的路由规则（开发环境下生效）：

from django.conf import settings
from django.conf.urls.static import static
from django.views.generic import TemplateView

urlpatterns = [
    url(r'^$', TemplateView.as_view(template_name='index.html')),
    # 你的API路由...
]

# 开发环境中，让Django直接处理静态资源请求
if settings.DEBUG:
    urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

第四步：React组件中保持正确的图片引入方式 #

你的React组件代码其实没问题，只要图片存放路径正确就行。假设你的组件在assets/js/目录，图片放在assets/js/resources/logo.jpeg，代码可以直接用：

import React from 'react'
import logo from './resources/logo.jpeg'

class Header extends React.Component {
  render() {
    return (
      <nav className="navbar navbar-expand-md fixed-top bg-dark navbar-dark">
        <a className="navbar-brand" href="#">
          <img 
            src={logo} 
            width="30" 
            height="30" 
            className="d-inline-block align-top" 
            alt="Project Logo" 
          />
          Project Name
        </a>
      </nav>
    )
  }
}

export default Header;

验证步骤 #

1. 重新运行webpack打包：npm run build（或你项目对应的打包命令），此时图片会被输出到project/static/bundles/images/目录下
2. 启动Django开发服务器：python manage.py runserver
3. 打开页面，查看图片的URL应该是/static/bundles/images/logo.[哈希值].jpeg，此时Django就能正确返回图片了

常见坑点排查 #

• 如果还是返回首页，检查是否有catch-all路由（比如url(r'^.*$', ...)），这种路由会把所有未匹配的请求都导向首页，一定要把静态资源路由放在它前面
• 确认webpack-stats.json是否正确生成，django-webpack-loader依赖这个文件定位打包后的资源
• 检查STATICFILES_DIRS是否包含了webpack输出的目录，Django需要从这里查找静态资源

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