如何在Strapi文章中插入图片并解决前端访问404问题

云原生阿岚

2026-10-12

Strapi富文本插入图片返回404 缺失配置排查步骤

检查config/server.js核心配置
确认配置文件中保留了strapi::public中间件，该中间件负责托管public目录下的静态资源，删除会导致所有上传资源无法对外访问；同时url字段需填写你实际对外暴露的Strapi服务完整地址（如线上部署地址https://api.yourdomain.com），不能保留默认的http://localhost:1337，否则富文本自动插入的图片前缀会错误。
参考配置如下：

module.exports = ({ env }) => ({
  host: env('HOST', '0.0.0.0'),
  port: env.int('PORT', 1337),
  url: env('PUBLIC_URL', 'http://localhost:1337'), // 生产环境替换为实际服务地址
  app: {
    keys: env.array('APP_KEYS'),
  },
  middlewares: [
    'strapi::errors',
    'strapi::security',
    'strapi::cors',
    'strapi::poweredBy',
    'strapi::logger',
    'strapi::query',
    'strapi::body',
    'strapi::session',
    'strapi::favicon',
    'strapi::public' // 该字段不可删除
  ],
});

检查前端富文本内容的链接拼接逻辑
Strapi富文本中插入的图片默认保存为相对路径/uploads/xxx.jpg，Gatsby前端拉取内容后需要手动拼接Strapi服务地址前缀，直接使用相对路径会请求前端域名下的对应路径，导致404。你可以在渲染富文本前做字符串替换，将所有<img src="/uploads/替换为<img src="你的Strapi服务地址/uploads/。

检查安全中间件CSP配置
如果你修改过config/security.js的内容安全策略，需要将Strapi服务域名加入img-src的允许列表：

module.exports = ({ env }) => ({
  contentSecurityPolicy: {
    directives: {
      'img-src': ["'self'", "data:", "blob:", "你的Strapi服务域名"],
    },
  },
});