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

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">

在 Debug模式下运行期间，我在 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

Place the custom package.windows80.appxmanifest (Windows 8.0), package.windows.appxmanifest (Windows 8.1), or package.phone.appxmanifestfile (Windows Phone 8.1) in the res/native/windows folder to override various configuration settings. Use the generated version of the file in the platforms/windows folder after building a Debug configuration of the project for Windows or Windows Phone (Universal).

和Sony Aurje solution

1. Create a Package.appxmanifest file under res/cert/windows8. Create a windows8 solution folder if not exist.

2. Open the project folder and go to bld/windows-AnyCpu/Debug and open AppxManifest.xml in notepad, copy the content and paste it in the above Package.appxmanifest file.

3. Double click on Package.appxmanifest file then goto Capabilities tab and choose ‘Private Networks (Client & Server)’.

4. Save it and run the app again, this time it worked I could connect to my 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>