How to add image to Swagger UI

Question

Hi,

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

Thank you.

Answer 1

Hi @Cenk,

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

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