将 Visual Studio 2015 外部图像加载到 img 标签上的 Cordova Windows 8.1

Question

我在 Cordova 应用程序中显示来自外部源的图像时遇到问题。所有 DOM 都在工作，但图像不会加载。我专注于使其仅适用于 Windows 8.1。我为 javascript 创建了一个 Cordova 项目。我已经在 config.xml 文件中设置了：

<?xml version="1.0" encoding="utf-8"?>
<widget xmlns:cdv="http://cordova.apache.org/ns/1.0" xmlns:vs="http://schemas.microsoft.com/appx/2014/htmlapps" id="pl.com.sk.todolist" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" defaultlocale="pl-PL">
  <name>todolist</name>
  <description>todolist</description>
  <author href="http://cordova.io" email="dev@cordova.apache.org">SK Team</author>
  <content src="index.html" />
  <access origin="*" />
  <vs:features />
  <preference name="SplashScreen" value="screen" />
  <preference name="windows-target-version" value="8.1" />
  <!-- Support for Cordova 5.0.0 plugin system -->
  <plugin name="cordova-plugin-whitelist" version="1" />
  <allow-intent href="http://*/*" />
  <allow-intent href="https://*/*" />
  <allow-intent href="tel:*" />
  <allow-intent href="sms:*" />
  <allow-intent href="mailto:*" />
  <allow-intent href="geo:*" />
  <platform name="android">
    <allow-intent href="market:*" />
  </platform>
  <platform name="ios">
    <allow-intent href="itms:*" />
    <allow-intent href="itms-apps:*" />
  </platform>
  <vs:plugin name="cordova-plugin-camera" version="1.2.0" />
  <vs:plugin name="cordova-plugin-file" version="3.0.0" />
  <vs:plugin name="cordova-plugin-file-transfer" version="1.2.1" />
  <vs:platformSpecificValues>
    <vs:platformSpecificWidget platformName="windows" id="pl.com.sk.todolist" version="0.0.0.1">
      <vs:name>todolist</vs:name>
    </vs:platformSpecificWidget>
  </vs:platformSpecificValues>
  <vs:plugin name="cordova-plugin-media-capture" version="1.0.1" />
  <preference name="Fullscreen" value="True" />
  <vs:plugin name="io.github.pwlin.cordova.plugins.fileopener2" version="1.0.11" src="https://github.com/pwlin/cordova-plugin-file-opener2" />
</widget>

我的img标签是：

<img ng-src="{{cfg.img_url}}{{groupImg.link}}" alt="{{groupImg.name}}"
        title="{{groupImg.name}}" ng-click="mc.showPreviewGroupImg()" />

渲染到 DOM 后是：

<img alt="The image" title="The image" ng-click="mc.showPreviewGroupImg()" ng-src="http://static.videezy.com/system/resources/thumbnails/000/003/294/original/aerial-view-of-mountain-forests-free-hd-video.jpg" src="http://static.videezy.com/system/resources/thumbnails/000/003/294/original/aerial-view-of-mountain-forests-free-hd-video.jpg">

在调试模式下运行期间，我在 Visual Studio 2015 中遇到错误：

SEC7117: Network request to http://static.videezy.com/system/resources/thumbnails/000/003/294/original/aerial-view-of-mountain-forests-free-hd-video.jpg did not succeed. Your application manifest does not declare the following capabilities: privateNetworkClientServer

我可以在哪里设置此功能？

Answer 1

关注Platform specific configuration files

放置自定义 package.windows80.appxmanifest (Windows 8.0)， package.windows.appxmanifest (Windows 8.1)，或 package.phone.appxmanifestfile (Windows Phone 8.1) 在 res/native/windows 文件夹以覆盖各种配置设置。 使用platforms/windows文件夹中生成的文件版本 在为 Windows 或构建项目的调试配置之后 Windows Phone（通用）。

和Sony Aurje solution

1. 在 res/cert/windows8 下创建 Package.appxmanifest 文件。如果不存在，则创建一个 windows8 解决方案文件夹。

2. 打开工程文件夹，进入bld/windows-AnyCpu/Debug，在记事本中打开AppxManifest.xml，复制内容粘贴到 以上 Package.appxmanifest 文件。

3. 双击 Package.appxmanifest 文件，然后转到 Capabilities 选项卡并选择“Private Networks (Client & Server)”。

4. 保存并再次运行该应用程序，这次它成功了，我可以连接到我的 Node js REST api。

我添加了文件，就像它在第一个引用中写的一样，我已经使用了第二个引用中的所有其他建议。

文件位置：

C:\{visual studio project dir}\BlankCordovaApp2\res\native\windows\package.windows.appxmanifest

我改变了什么？

<Capabilities>
    <Capability Name="privateNetworkClientServer" /> <!-- Added this line -->
    <Capability Name="internetClient" />
    <DeviceCapability Name="webcam" />
    <DeviceCapability Name="microphone" />
</Capabilities>

Answer 2

我在 Visual Studio 中测试应用程序时遇到了同样的问题，但是当我从 PGBuild 编译应用程序并在设备上测试时，它显示了所有图像。 你在模拟器上测试应用程序吗？如果是这样，请解锁windows phone 并对其进行测试，某些功能在模拟器上无法使用，您可能会认为您的代码有问题。

您可以在此链接获取解锁 windows phone 的程序 unlock windows phone