Django CKEditor上传图片后台正常返回但React前端无法显示该如何修复

你遇到的问题核心是CKEditor存入数据库的图片路径为相对路径，前后端分离部署时，React前端会默认把相对路径指向自身服务域名，而非Django后端服务，导致图片地址不匹配。你所说的F12看到资源成功返回，大概率是之前访问过正确路径产生了缓存，或你误把接口请求的成功状态当成了图片资源的请求状态。

第一步：修改前端富文本处理逻辑 #

直接修改你代码中的createBlog函数，给所有富文本中图片的相对路径拼接上Django后端的服务域名即可，修改后代码如下：

const createBlog = () => {
    if (!blog.content) return {__html: ''};
    // 匹配所有img标签的src属性，给相对路径拼接后端域名
    const processedContent = blog.content.replace(/<img[^>]+src="([^">]+)"/g, (match, src) => {
        // 已经是完整http路径的图片无需处理
        if (src.startsWith('http')) return match;
        return match.replace(src, `${process.env.REACT_APP_API_URL}${src}`);
    });
    return {__html: processedContent};
};

第二步：确认后端配置（可选，用于排查异常） #

如果按上述修改后仍有问题，检查Django侧两个配置：

• 路由配置中是否开启了media资源访问：
  在Django项目根目录的urls.py中添加如下代码：

from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    # 你原有路由配置保持不变
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

• 跨域配置是否放行图片资源：
  如果你用了django-cors-headers，确保前端域名已经加进了CORS_ALLOWED_ORIGINS列表，避免跨域拦截图片请求。

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