Question

我正在构建一个ASP.NET CORE Web API，并使用Swagger作为文档。我无法更改该图标。我在wwwroot下有一个swagger-ui目录，在该目录中已放置了我的收藏夹图标，但该收藏夹图标从未存在过。另外，我正在自定义js文件中使用favascript更改收藏夹图标。

那么，如何更改Swagger的图标？

Answer 1

这对我有用：

首先，您必须创建wwwroot文件夹，并在其中放置一个名为swagger的文件夹。编辑您的csproj，使其包含以下行：

<ItemGroup>
    <None Include="wwwroot\*" />
</ItemGroup>

此目录下的文件必须为Content，Do not copy。无论如何，这是默认选项。

然后，您必须将两个名为favicon-16x16.png和favicon-32x32.png的png文件放置到大头贴文件夹中。

最后一次尝试，请在app.UseStaticFiles();之前添加app.UseSwaggerUI();，以使其正常工作。

您还可以在wwwroot文件夹下添加favicon.ico。

**注：如果使用app.UseSwaggerUI(config => config.SwaggerEndpoint("my/swagger/doc/file.json", "Rest API"));修改了端点URL，则wwwroot下的目录树必须与该URL匹配。即wwwroot/my/swagger/doc/favicon-16x16.png和wwwroot/my/swagger/doc/favicon-32x32.png。

Answer 2

您必须实质上覆盖它。默认情况下，Swagger UI将图标设置为从Swagger UI根目录拉出。例如，如果您将文档加载到/swagger-ui，则将从/swagger-ui/favicon-32x32.png和/swagger-ui/favicon-16x16.png中拉出图标图标。因此，您可以将此目录添加到wwwroot并在其中添加自己的收藏夹图像。

Answer 3

您需要按如下方式插入jscript：

1-如下创建/assets/js/docs.js：

(function() {
    var link = document.querySelector("link[rel*='icon']") || document.createElement('link');;
    document.head.removeChild(link);
    link = document.querySelector("link[rel*='icon']") || document.createElement('link');
    document.head.removeChild(link);
    link = document.createElement('link');
    link.type = 'image/x-icon';
    link.rel = 'shortcut icon';
    link.href = '../assets/images/logo_icon.png';
    document.getElementsByTagName('head')[0].appendChild(link);
})();

2-在您的startup.cs中加载脚本

public void Configure(IApplicationBuilder app, IHostingEnvironment env, IApiVersionDescriptionProvider provider)
        {
            app.UseSwaggerUI(
                options =>
                {                    
                    options.InjectJavascript("../assets/js/docs.js");  
                });

        }

注意：确保在.NET Core Configure方法中启用了静态文件。

public void Configure(IApplicationBuilder app, IHostingEnvironment env, IApiVersionDescriptionProvider provider)
{

    app.UseStaticFiles(); // For the wwwroot folder

    app.UseStaticFiles(new StaticFileOptions
    {
        FileProvider = new PhysicalFileProvider(Path.Combine(Directory.GetCurrentDirectory(), "assets/images")),
        RequestPath = "/assets/images"
    });        

    app.UseStaticFiles(new StaticFileOptions
    {
        FileProvider = new PhysicalFileProvider(Path.Combine(Directory.GetCurrentDirectory(), "assets/js")),
        RequestPath = "/assets/js"
    });

}

Answer 4

仅将favicon.ico放在wwwroot文件夹wwwroot/favicon.ico中的根目录下，也可以实现此目的。将favicon.ico放在根目录下，用作默认的浏览器选项卡图标。

当然，如前所述，您需要确保自己的Configure（）方法中有app.UseStaticFiles();才能在wwwroot中提供文件。

最后还要确保.csproj文件中包含以下内容：

  <ItemGroup>
    <None Include="wwwroot\*" />
  </ItemGroup>

您如何更改Swagger图标？

4 个答案: