android - Android 上的 ionic : redirected image sources break ng-src

Question

我已经将必要的域添加到白名单/CSP 规则中。实际上重定向到真实源的图像源——例如:

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

使用 ng-src 时中断，但仅在 Android 上或使用 Chrome 开发工具屏幕尺寸模拟器(设置为移动设备屏幕分辨率之一)时中断。它在 IOS 和全屏浏览器中运行 Ionic 时有效。浏览器或日志中没有错误。这里到底发生了什么？

这是运行完全相同的代码的两个屏幕截图，只是以不同的屏幕尺寸重新加载。

同样，这两个屏幕截图之间的代码完全没有改变。控制台中的错误在两者之间完全无关且一致。有什么想法可以从哪里开始吗？

编辑:需要明确的是，第一个屏幕截图中加载的图像来自 Instagram，而不是 Twitter 的重定向个人资料图像 URL。没有一个 Twitter 会以较小的屏幕分辨率加载，但所有 Instagram 都可以。应用到这些元素的任何类都没有特定于屏幕尺寸的 CSS 规则。

此外，如果我将 src 替换为重定向所在的 url，则图像呈现良好。

Answer 1

我认为合理的推论可能会将错误原因与 User-Agent 联系起来。

由于图像在移动设备上损坏，这意味着图像的 src 没有被重定向到有效的图像资源。

您可以在上面的推特 URL 中看到这一点。检查开发人员工具中的网络请求。在正常模式下，它会重定向到正确呈现的有效图像。但在响应模式下，图像重定向到“mobile.twitter”域，并且该域中不存在相同的 URI。

解决方案？ 也许通过 ajax 加载图像，但是 twitter 不允许跨源请求! 如果确实需要，我认为您可以编写一个简单的脚本，从传递的 url 中提取图像位置，然后在其响应中将其设置为重定向位置，或者甚至可以下载图像数据并用数据本身进行响应。

或者您可以尝试覆盖 Cordova 中的 userAgent。将其设置为非移动浏览器，我想图像会正确加载。 请参阅以下问题以了解有关如何执行此操作的更多信息: How i can set User Agent in Cordova App

这是我第一次尝试时能想到的。