NestJs Swagger 如何添加自定义网站图标答案

【问题标题】：NestJs Swagger how to add custom faviconNestJs Swagger 如何添加自定义网站图标
【发布时间】：2020-02-15 17:50:08
【问题描述】：

我正在尝试将自定义图标添加到我的 NestJs 文档中。但是，我对如何解析路径文件有点迷茫，不知道如何实现这一点。

我正在使用 nestjs/swagger 模块版本 3.1.0 并尝试在初始化 Swagger 模块时像这样传递路径文件。

我的 main.ts 文件

SwaggerModule.setup('/v1/docs', app, document, {
    customCss: CUSTOM_STYLE,
    customSiteTitle: 'My API Documentation',
    customfavIcon: './public/favicon.jpg'
});

搜索了github问题，没有发现任何有用的东西。正如您从代码中看到的那样，我能够修改 CSS 样式，但我无法弄清楚如何自定义网站图标。

感谢任何帮助

【问题讨论】：

您是否为您的服务器设置了静态资源？

标签： swagger favicon nestjs

【解决方案1】：

我已使用以下方法将自定义网站图标添加到我的 swagger 文档中：

您首先要确定的是，在您的 main.ts 中，应用程序已使用以下内容进行初始化：

const app: NestExpressApplication = await NestFactory.create(...)

要提供静态内容，您必须使用 NestExpressApplication 初始化您的应用。

接下来是允许 Nest 应用程序在初始化后使用您的 main.ts 中的以下内容查找公共内容：

app.useStaticAssets(join(__dirname, '..', 'public'));

另外，在应用程序的根目录中创建一个公共目录，并将 favicon.jpg 文件粘贴到其中。

现在是在 main.ts 中初始化 Swagger 的时候了

SwaggerModule.setup('/v1/docs', app, document, {
    customCss: CUSTOM_STYLE,
    customSiteTitle: 'My API Documentation',
    customfavIcon: '../favicon.jpg'
});

如果我们的main.ts 位于应用程序根目录下的src 文件夹中，您必须提供应用程序根目录的相对路径，例如../favicon.jpg。

【讨论】：

您好，感谢您的回复！我没有使用 useStaticAssets 函数。我现在已经添加了。 customFavIcon 不应该是 "../public/favicon.jpg" 吗？无论如何，我都尝试过，并且在您展示示例时，它们都会导致类型错误： GET localhost:3000/v1/public/favicon.jpg 404 (Not Found) 。让我感到困惑的是 /v1/docs 和 /v1/public 如何一起处理请求。感谢任何帮助。
如果你使用的是静态服务，那么你的 URL 应该是GET localhost:3000/favicon.jpg
通过像 Swagger 选项这样的配置来工作：customfavIcon: '/favicon.png'。谢谢！！！

【解决方案2】：

替代解决方案，只需托管您的网站图标并使用外部网址引用它

  SwaggerModule.setup('api', app, getSwaggerDocument(app), {
    ...
    customfavIcon:
      'https://[your-bucket-url].com/.../anything.png',
  });

【讨论】：