Ionic auf Android: umgeleitete Bildquellen break ng-src

Question

Ich habe bereits die erforderlichen Domains zu den Whitelist/CSP-Regeln hinzugefügt. Bildquellen, die tatsächlich auf die eigentliche Quelle umleiten - zum Beispiel:

https://twitter.com/user_name/profile_image?size=bigger

Pause, wenn ng-src verwenden, aber nur auf Android oder mit der Chrome-Entwickler-Tool Bildschirmgröße Emulator (Einstellung auf einen des Mobil Bildschirmauflösungen des Geräts). Es funktioniert, wenn Ionic auf IOS und im Browser mit dem Vollbild ausgeführt wird. Es wird kein Fehler im Browser oder in den Protokollen ausgegeben. Was in der Welt könnte hier geschehen?

Dies sind zwei Screenshots des exakt gleichen Codes ausgeführt, nur in den verschiedenen Bildschirmgrößen neu geladen.

Auch hier ist der Code nicht AT ALL zwischen diesen beiden Screenshots geändert. Die Fehler in der Konsole sind völlig unabhängig und konsistent zwischen den beiden. Irgendwelche Ideen, um anzufangen?

BEARBEITEN: Um es klar zu sagen, die Bilder, die im ersten Screenshot laden, stammen von Instagram, nicht die umgeleiteten Profilbild-URLs von Twitter. KEINE der Twitter-geladenen in der kleineren Bildschirmauflösung, aber alle der Instagram tun. Für die Klassen, die auf diese Elemente angewendet werden, gibt es keine bildschirmgrößenspezifischen CSS-Regeln.

Wenn ich die src durch die URL ersetzen, auf der die Umleitung landet, wird das Bild gut wiedergegeben.

Answer 1

Ich denke, ein plausibler Abzug könnte die Fehlerursache mit User-Agent in Verbindung bringen.

Da das Bild auf Mobilgeräten bricht, bedeutet dies, dass der src des Bildes nicht zu einer gültigen Bildressource umgeleitet wird.

Sie können dies in Aktion für die oben genannte Twitter-URL sehen. Überprüfen Sie die Netzwerkanforderungen in Entwicklertools. Im normalen Modus wird es auf ein gültiges Bild umgeleitet, das korrekt gerendert wird. Im Responsive-Modus wird das Bild jedoch zur Domäne "mobile.twitter" umgeleitet, und derselbe URI ist in dieser Domäne nicht vorhanden.

Lösung? Vielleicht laden Sie das Bild durch Ajax, aber dann würde Twitter Cross Cross-Anfragen nicht erlauben! Wenn es wirklich benötigt wird, denke ich, dass Sie ein einfaches Skript schreiben können, das den Bildort aus der übergebenen URL extrahiert und dann als Umleitungsstandort in seiner Antwort festlegt, oder sogar die Bilddaten herunterlädt und mit den Daten selbst antwortet .

Oder Sie können versuchen, den BenutzerAgent in Cordova zu überschreiben. Stellen Sie es auf einen nicht mobilen Browser ein und ich denke, das Bild wird korrekt geladen. Beachten Sie die folgende Frage mehr darüber zu wissen, wie Sie es tun können: How i can set User Agent in Cordova App

Das ist, was ich im ersten Versuch denken kann.