Wie Swagger UI Header-Logo in Swashbuckle ersetzen

Question

Ich verwende das Swashbuckle-Paket für WebAPI und versuche, das Aussehen und Verhalten der Swagger ui Standardseite anzupassen. Ich würde gerne das Standard-Logo/Header prolong anpassen. Ich habe folgendes SwaggerConfig

hinzugefügt

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

Der Inhalt individuell js.js sind wie folgt:

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

Das funktioniert in den meisten Fällen aber die visuelle ist ein bisschen schrill, dass die Standard-Swagger-Header ist sichtbar, während die Seite lädt und nach einer kurzen Verzögerung der Jquery unter Kicks und der Inhalt des Elements #logo aktualisiert wird

Gibt es eine Möglichkeit, dies zu vermeiden, so dass die Jquery als Teil der Initiale eintritt load/render und es scheint nahtlos zu sein?

Answer 1

Ich landete das Hinzufügen einer neuen „index.html“ basiert weg this version stattdessen das Verhalten der Standard erzeugt ein

Answer 2

Die custom-js.js müssen nach allen js-Dateien platziert werden.

Answer 3

zu versuchen, zu ändern, wenn Sie die index.html nicht erstellen möchten, können Sie Aktualisieren Sie auch das Logo mit injizierten CSS, das ist viel schneller als js Injektion.

In Prahlerei Config ermöglichen die c.InjectStylesheet und verweisen auf die css Sie

erstellt

im CSS selbst:

.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 */ 
} 

Firmen für CSS-Trick: https://css-tricks.com/replace-the-image-in-an-img-with-css/

Answer 4

@MichaelD kann einfach Folgendes tun:

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