Question

我正在使用cordova和angular编写移动（混合）应用程序（最新版本：v1.2.13）。该应用在Android上正常运行。

在我的一个html页面上，我使用<tabset>来显示多个标签，每个标签都显示包含ng的静态内容。在这个静态内容中，我正在显示本地图像（使用<img src="images/xxx.png">）

在Chrome上，我的应用程序运行正常，所有图片都显示在其标签下方。当我使用Cordova在手机（三星S4）上部署应用程序时，显示在“选项卡”上方的图像显示正常，但不显示包含ng的静态html内显示的图像（显示损坏的图像问号））。

这是图片标记的外观：

<a href="..."><img src="images/xxxx.png" width="184" height="102"></a>

这就是我在标签下面包含静态html页面的方式：

<div class="xxx" ng-include="tabs[active].page"></div>

我已经看到由ng-include创建自己的$ scope引起的各种“问题”。然而，我没有看到这会如何影响图像的加载。有什么想法吗？

Answer 1

我们有完全相同的问题。我们使用lineman + angular。它在浏览器中完美运行，也可以在设备上的chrome +常规浏览器中使用。然而，在cordova应用程序中，img标签仅在主index.html中工作，而不在任何包含的模板中工作。似乎一旦角度在cordova浏览器内自举，img标签就会停止工作。

使用设备上的innerHTML和jsconsole进一步测试。

在index.html中我们放了以下内容。

  <div id="test"> hello </div>
  <div id="test2"> <img src="img/test.jpg"/> </div>

test2中的图像显示正常，因此路径正确。现在，当我们关注时，使用jsconsole.com：

  document.getElementById("test").innerHTML="<img src='img/test.jpg'/>";

它不会在测试div中显示图像。

注入外部图像仍然很有用，例如：

  document.getElementById("test").innerHTML="<img src='http://1.bp.blogspot.com/-cs_a2ro_P0Y/TkA8D-vPCVI/AAAAAAAABwE/gHJwh4m8Jkw/s1600/pg.png'/> <b>image here</b>";

使用上面一行，它会直接在设备上显示图像。

然后我们做以下证明angular + cordova存在问题：我们将div test2的内容与显示的工作图像一起复制到第一个div测试中。

   var img = document.getElementById("test2").innerHTML;
   document.getElementById("test").innerHTML = img;

我们再次在测试div中显示一个损坏的图像链接。

如果有人找到解决方案会很好（现在我们似乎必须重写我们的代码，因此它不会使用角度模板来完成工作......）。

要进行相同的测试，请使用cordova应用程序并插入带有（http://jsconsole.com/）的监听标签。

使用角度ng-include后在移动设备上断开的html图像链接

1 个答案: