How to add image to Swagger UI

Cenk 956 Reputation points
2023-03-31T06:58:07.17+00:00

Hi,

I wonder if there is a way to add an image to Swagger UI?

Thank you.

User's image

ASP.NET Core
ASP.NET Core
A set of technologies in the .NET Framework for building web applications and XML web services.
4,226 questions
{count} votes

1 answer

Sort by: Most helpful
  1. JasonPan - MSFT 4,386 Reputation points Microsoft Vendor
    2023-03-31T11:27:27.5766667+00:00

    Hi @Cenk,

    Please check the test result first. I think you want add your custom icon here, right ?

    BlazorApp

    According to my investigation, because the default SwaggerUI is integrated in the package, we cannot directly find the index.html page in the VS2022 and modify it. But the official IndexStream method is provided, and then we can replace the original index.html with a custom page. The sample code is as follows:

    app.UseSwaggerUI(x =>
        {
            x.ShowCommonExtensions();
            x.ShowExtensions();
            x.DisplayOperationId();
            x.DisplayRequestDuration();
            x.EnableDeepLinking();
            x.EnableFilter();
    
            x.IndexStream = () =>
                        typeof(WeatherForecastController)
                        .GetTypeInfo()
                        .Assembly
                        .GetManifestResourceStream("openapi_clients.index-swagger.html");
        });
    

    And I add below code in the new index file.

    <script>
            setTimeout(function () {
                var img = "<div style='float:right'><img src='https://blogs.microsoft.com/wp-content/uploads/prod/2012/08/8867.Microsoft_5F00_Logo_2D00_for_2D00_screen-1920x706.jpg' alt='Microsoft' width='180' height='78'></div>";
                $(".title").append(img);
            }, 800)
    
        </script>
    
    

    Then we can add image in Swagger UI.


    If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

    Best regards,

    Jason Pan

    0 comments No comments