Android 上的 Ionic：重定向的图像源会破坏 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 没有被重定向到有效的图像资源。

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

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

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

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