Ich habe viel Mühe, ein Bild zu bekommen, das ich von meiner Web-API abrufe, um es als Hintergrundbild in meiner Angular-Anwendung anzuzeigen.
Die Aktion der Web-API, die das Bild zurückgibt, sieht folgendermaßen aus:
%Vor%Das ist zur Zeit meine Angular Service Methode (aber ich habe viele Alternativen ausprobiert):
%Vor% Und das versuche ich auf das [style.background-image] des DOM-Elements anzuwenden:
Wie ich bereits sagte, habe ich versucht, verschiedene Dinge aus Dingen, die ich im Internet gefunden habe, zu versuchen, aber ich habe ein inhärentes Missverständnis der meisten beteiligten Stücke. Wie kommt meine Web-API zurück? Wie kann ich mit dieser Clientseite umgehen? Wie massiere ich den Inhalt in etwas, das für eine background-image css-Eigenschaft geeignet ist? Ich würde das gerne viel besser verstehen, zusätzlich dazu, dass das funktioniert. Alle Hilfe wird sehr geschätzt!
Ich habe auch versucht, die Web-API-Aktion so zu ändern, dass eine Base64-Zeichenfolge wie folgt zurückgegeben wird:
%Vor%und behandeln es Client-Seite wie folgt:
%Vor% und Vereinfachung des Aufrufers meines Dienstes, um [style.background-image] des DOM-Elements zu liefern:
Ich habe console.log ed die Antwort und es sieht in der Tat wie eine Base64-String (denke ich?). Aber das CSS ändert sich nie.
Mein Markup ist derzeit das:
%Vor%Der Code meiner Komponente lautet derzeit:
%Vor% Ich habe den Punkt erreicht, an dem, wenn ich console.log out, kopieren Sie es und fügen Sie es in die CSS-Regeln für die Div in Dev-Tools, das Bild zeigt sich. Ich habe versucht, das in NgZone auszuführen, und das CSS wird immer noch nicht angezeigt. Jede und jede Hilfe wird geschätzt.
Wenn ich also <div class="image" [style.background-image]="project.image | async"></div> in <img [src]="project.image | async" alt=""> ändere, wird das Bild asynchron angezeigt. Das unglückliche an diesem Ansatz ist, dass das Bildfehler-Symbol sichtbar ist, während sich die Anforderung im Flug befindet. Dieses Fehlersymbol bleibt für alle Elemente bestehen, die kein Bild zurückgeben (unvollständige Datenbank)
Um zu vermeiden, dass das Fehlerbild angezeigt wird, bis das tatsächliche Bild geladen ist, ändern Sie Ihren HTML-Code wie folgt:
%Vor% Die Lösung in Ihrem Update 3 funktioniert auch. Aber hier ist ein anderer Weg, es zu tun. Sie können die [style] -Direktive des div so einstellen, dass background-image hinzugefügt wird. Sie müssen die Stile bereinigen, wenn Sie sie an das Dom übergeben.
%Vor%In Ihrer Komponente.html:
%Vor%.. um das Fehlerbild zu entfernen, bis wir das Bild bekommen, fügen wir ein
*ngIf:
%Vor%... und in Ihrem component.ts:
Tags und Links base64 angular asp.net-core-webapi background-image