如何在Swagger-UI展示的Swagger文档中嵌入图片

可行实现方案如下： #

第一步：修正GFM语法错误（优先用该方案，无需修改Swagger UI配置） #

你之前的GFM写法误用了方括号包裹图片路径，正确的行内图片语法需要用小括号包裹路径，示例如下：

...
  "info": {
    "description": "![alt text](/static/img/image.png)"
  }
...

Swagger UI 3.x及以上版本默认支持Markdown渲染，修正语法后即可正常显示图片。

第二步：如果需要使用HTML语法，调整Swagger UI配置 #

如果你要使用<img>标签实现更复杂的样式控制，需要关闭Swagger UI默认开启的HTML安全过滤配置：

1. 找到Swagger UI的初始化代码，添加htmlSanitizer: false配置：

const ui = SwaggerUIBundle({
  url: "你的swagger文档地址",
  dom_id: '#swagger-ui',
  // 新增下面这行配置
  htmlSanitizer: false,
  // 其余原有配置保持不变
})

注意：关闭HTML安全过滤后会存在XSS注入风险，仅在你完全可控文档内容的场景下使用该配置。

2. 调整后你的HTML写法即可正常生效：

...
  "info": {
    "description": "<img alt=\"alt text\" src=\"/static/img/image.png\" style=\"max-width: 600px;\">"
  }
...

注意事项 #

• 提前在浏览器地址栏输入你填写的图片路径，确认可以正常访问，排除路径错误导致的404问题
• 如果你使用的是SpringDoc、SpringFox等封装好的Swagger UI依赖，可以直接通过框架配置项修改该属性：比如SpringDoc可在配置文件中添加springdoc.swagger-ui.html-sanitizer=false

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