NestJs Swagger如何添加自定义favicon

xdnvmnnf  于 2023-11-18  发布在  其他
关注(0)|答案(4)|浏览(112)

我试图在我的NestJs文档中添加一个自定义的favicon。然而,我对路径文件是如何解析的有点困惑,也不知道如何实现这一点。
我正在使用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样式,但我不知道如何自定义favicon。
感谢任何帮助

kmb7vmvb

kmb7vmvb1#

我已经添加了自定义的favicon到我的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'
});


您必须给予一个相对路径到根的应用程序,如../favicon.jpg的情况下,我们的main.ts是在src文件夹中的根应用程序。

zmeyuzjn

zmeyuzjn2#

替代解决方案,只需托管您的favicon并使用外部url引用它

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

字符串

ckx4rj1h

ckx4rj1h3#

为了验证pravindot17的答案,现在有了@nestjs/serve-static包来托管静态文件。这避免了我们对Nest.js客户端进行类型转换,并依赖于我们运行的是一个由JavaScript支持的Nest.js服务器的隐式假设。
安装完包后,将其挂接到src/app.module.ts中。此配置要求项目的根目录中有一个/public/文件夹,用于存储静态资产。

import { Module } from '@nestjs/common';
import { ServeStaticModule } from '@nestjs/serve-static';
import { join } from 'path';

@Module({
  imports: [
    // Host static files in ../public under the /static path.
    ServeStaticModule.forRoot({
      /**
       * Config options are documented:
       * https://github.com/nestjs/serve-static/blob/master/lib/interfaces/serve-static-options.interface.ts
       */
      rootPath: join(__dirname, '..', '..', 'public'),
      serveRoot: '/static',
    }),
    // ... 
})
export class AppModule {}

字符串
现在,我自己的首选是使用绝对路径而不是相对路径,因为这使它独立于我们选择的托管API文档的路径。

SwaggerModule.setup('/v1/docs', app, document, {
    customfavIcon: '/static/favicon.jpg'
});


最后一点要注意的是,此配置托管来自/static/*的静态文件,这样做是为了防止对不存在的端点的API调用向最终用户显示找不到静态文件的错误消息。
否则,所有不存在的端点上的404将看起来像这样:

{"statusCode":404,"message":"ENOENT: no such file or directory, stat '/Users/me/my-project/public/index.html'"}

1cosmwyk

1cosmwyk4#

我按照pravindot17说的说明操作,但它对我来说是有效的,我在nest-cli.json(nest CLI配置文件)中的compilerOptions上添加"assets": ["public/**/*"],如下所示,因为Nest没有在dist文件夹上构建公共文件夹:
nest-cli.json

{
  "$schema": "https://json.schemastore.org/nest-cli",
  "collection": "@nestjs/schematics",
  "sourceRoot": "src",
  "compilerOptions": {
    "deleteOutDir": true,
    "assets": ["public/**/*"]
  }
}

字符串

相关问题