如何在Angular前端正确显示Strapi WYSIWYG Markdown编辑器中的图片

方案1：预处理Markdown内容的图片路径（全环境通用，最稳妥） #

该方案无需修改服务端配置，在前端渲染Markdown前统一替换路径即可：

• 先在Angular的环境配置文件（environment.ts、environment.prod.ts）中添加Strapi服务地址配置：

// 开发环境 environment.ts 示例
export const environment = {
  production: false,
  strapiBaseUrl: 'http://localhost:1337'
};

// 生产环境 environment.prod.ts 示例
export const environment = {
  production: true,
  strapiBaseUrl: '你的线上Strapi服务地址'
};

• 获取到Strapi返回的Markdown原始内容后，通过正则批量替换所有相对路径的图片前缀：

import { environment } from 'src/environments/environment';

// markdownContent为从Strapi拿到的原始Markdown内容
function processMarkdown(markdownContent: string): string {
  // 匹配所有 /uploads 开头的相对路径图片，自动拼接Strapi地址
  return markdownContent.replace(/!\[(.*?)\]\(\/uploads\/(.*?)\)/g, `![$1](${environment.strapiBaseUrl}/uploads/$2)`);
}

• 把处理后的内容传给Markdown渲染组件即可，所有图片路径会自动指向Strapi服务的对应资源。

方案2：代理转发请求（适用本地开发+线上Nginx部署场景） #

如果不想修改Markdown内容，可以通过代理把/uploads开头的请求转发到Strapi服务：

本地开发配置 #

• 在Angular项目根目录新建proxy.conf.json文件：

{
  "/uploads": {
    "target": "http://localhost:1337",
    "secure": false
  }
}

• 修改package.json中的启动命令，加载代理配置：

"scripts": {
  "start": "ng serve --proxy-config proxy.conf.json"
}

• 后续用npm start启动项目，所有/uploads开头的请求会自动转发到1337端口的Strapi服务。

线上生产配置 #

线上部署时直接在Nginx配置中添加规则，把/uploads路径的请求转发到Strapi服务即可，无需修改前端代码。

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