How to replace Swagger UI header logo in Swashbuckle

问题

I am using the Swashbuckle package for WebAPI and am attempting to customize the look and feel of the swagger ui default page. I would like to customize the default swagger logo/header. I have added the following to SwaggerConfig

.EnableSwaggerUi(c =>
 {
  c.InjectJavaScript(thisAssembly, 
    typeof(SwaggerConfig).Namespace + ".SwaggerExtensions.custom-js.js");
  }

The contents of custom-js.js are as follows:

$("#logo").replaceWith("<span id=\"test\">test</span>");

This works for the most part but the visual is a bit jarring, in that the default swagger header is visible while the page loads and after a brief delay the jquery below kicks and the content of the #logo element is updated

Is there a way to avoid this so that the jquery kicks in as part of the initial load/render and it appears seamless?

回答1:

I ended up adding a new "index.html" based off this version instead of trying to modify the behavior of the default generated one

回答2:

If you don't want to create the index.html, you can also update the logo with injected css, this is a lot faster than js injection.

In swagger config enable the c.InjectStylesheet and point to the css you created

In the css itself:

.logo__img {
 background: url([PathToLogo]) no-repeat;
 display: block;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 width: 64px; /* Width of new image */
 height: 25px; /* Height of new image */
 padding-left: 64px; /* Equal to width of new image */
}

credits for css trick: https://css-tricks.com/replace-the-image-in-an-img-with-css/

回答3:

@MichaelD can simply do the following instead:

.logo__img {
    content: url([PathToLogo]);
    width: 72px; /* Width of new image */
    height: 31px; /* Height of new image */
}

回答4:

The custom-js.js need to be placed after all js file.

来源：https://stackoverflow.com/questions/38713764/how-to-replace-swagger-ui-header-logo-in-swashbuckle