Cordova Windows 8.1 on Visual Studio 2015 external image loading to img tag

问题

I have a problem with displaying images from external source in Cordova app. All DOM is working but images won't to load. I am focused to made it working for Windows 8.1 only. I created a Cordova project for javascript. I have set in config.xml file:

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

My img tag is:

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

After rendering to DOM it is:

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

During running in debug mod I'm getting an error in 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

Where can I set this capability?

回答1:

Following to the 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).

and Sony Aurje solution

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

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.

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

Save it and run the app again, this time it worked I could connect to my Node js REST api.

I added the file like it was written in first quote and I have used all other advices from second quote.

File location:

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

What I have changed?

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

回答2:

I was having same issue while testing the app in visual studio, but when I compiled app from PGBuild and tested on device it displayed all the images. Are you testing app on emulator? If so, please unlock windows phone and test on it, some of the capabilities will not work on emulator and you might think that there is problem with your code.

You can get the procedure for unlocking windows phone at this link unlock windows phone

来源：https://stackoverflow.com/questions/32454292/cordova-windows-8-1-on-visual-studio-2015-external-image-loading-to-img-tag

标签

javascript

angularjs

cordova

windows-8.1

visual-studio-2015