8 Replies Latest reply on Mar 8, 2017 7:49 PM by risingj

    Show image from external source

    miland11729202

      When I try to display image in my PhoneGap app with some external source, app works fine in browser but when I open it on a mobile phone for example in PhoneGap Developer, image doesn't render.

       

      <li>
       
      <a href="#">
        
      <img src="http://imshopping.rediff.com/imgshop/80-90/shopping/pixs/4585/c/Cu_11515095._cute-basket-of-fresh-pink-roses-flower-gift-282.jpg" width="80" height="80">
        
      <h3>8.3.2016</h3>
        
      </a>
      </li>

       

      I just get image placeholder like in screenshot bellow.

      5Js4h.png

      I even added following lines into my config.xml but nothing has changed:

       

      <access origin="*" />
      <allow-navigation href="*" />
      <allow-intent href="*"
      />

       

      Something still blocking external resources...

        • 1. Re: Show image from external source
          kerrishotts Adobe Community Professional

          Is the whitelist plugin installed? (Post your config.xml file, minus secret/identifying information)

           

          Do you have a Content Security Policy (CSP) meta tag in your index.html file? If so, please post it.

          • 2. Re: Show image from external source
            miland11729202 Level 1

            <?xml version='1.0' encoding='utf-8'?>

            <widget id="com.genericname.social" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0">

                <name>genericname</name>

                <description>

                    Hello World sample application that responds to the deviceready event.

                </description>

                <author email="support@phonegap.com" href="http://phonegap.com">

                    PhoneGap Team

                </author>

                <content src="index.html" />

                <preference name="DisallowOverscroll" value="true" />

                <preference name="android-minSdkVersion" value="14" />

                <plugin name="cordova-plugin-battery-status" source="npm" spec="~1.1.1" />

                <plugin name="cordova-plugin-camera" source="npm" spec="~2.1.1" />

                <plugin name="cordova-plugin-media-capture" source="npm" spec="~1.2.0" />

                <plugin name="cordova-plugin-console" source="npm" spec="~1.0.2" />

                <plugin name="cordova-plugin-contacts" source="npm" spec="~2.0.1" />

                <plugin name="cordova-plugin-device" source="npm" spec="~1.1.1" />

                <plugin name="cordova-plugin-device-motion" source="npm" spec="~1.2.0" />

                <plugin name="cordova-plugin-device-orientation" source="npm" spec="~1.0.2" />

                <plugin name="cordova-plugin-dialogs" source="npm" spec="~1.2.0" />

                <plugin name="cordova-plugin-file" source="npm" spec="~4.1.1" />

                <plugin name="cordova-plugin-file-transfer" source="npm" spec="~1.5.0" />

                <plugin name="cordova-plugin-geolocation" source="npm" spec="~2.1.0" />

                <plugin name="cordova-plugin-globalization" source="npm" spec="~1.0.3" />

                <plugin name="cordova-plugin-inappbrowser" source="npm" spec="~1.3.0" />

                <plugin name="cordova-plugin-media" source="npm" spec="~2.2.0" />

                <plugin name="cordova-plugin-network-information" source="npm" spec="~1.2.0" />

                <plugin name="cordova-plugin-splashscreen" source="npm" spec="~3.2.1" />

                <plugin name="cordova-plugin-statusbar" source="npm" spec="~2.1.2" />

                <plugin name="cordova-plugin-vibration" source="npm" spec="~2.1.0" />

                <plugin name="cordova-plugin-whitelist" source="npm" spec="~1.2.1" />

                <icon src="icon.png" />

                <platform name="android">

                    <icon density="ldpi" src="www/res/icon/android/drawable-ldpi-icon.png" />

                    <icon density="mdpi" src="www/res/icon/android/drawable-mdpi-icon.png" />

                    <icon density="hdpi" src="www/res/icon/android/drawable-hdpi-icon.png" />

                    <icon density="xhdpi" src="www/res/icon/android/drawable-xhdpi-icon.png" />

                    <icon density="xxhdpi" src="www/res/icon/android/drawable-xxhdpi-icon.png" />

                    <icon density="xxxhdpi" src="www/res/icon/android/drawable-xxxhdpi-icon.png" />

                    <splash density="land-ldpi" src="www/res/screen/android/drawable-land-ldpi-screen.png" />

                    <splash density="land-mdpi" src="www/res/screen/android/drawable-land-mdpi-screen.png" />

                    <splash density="land-hdpi" src="www/res/screen/android/drawable-land-hdpi-screen.png" />

                    <splash density="land-xhdpi" src="www/res/screen/android/drawable-land-xhdpi-screen.png" />

                    <splash density="land-xxhdpi" src="www/res/screen/android/drawable-land-xxhdpi-screen.png" />

                    <splash density="land-xxxhdpi" src="www/res/screen/android/drawable-land-xxxhdpi-screen.png" />

                    <splash density="port-ldpi" src="www/res/screen/android/drawable-port-ldpi-screen.png" />

                    <splash density="port-mdpi" src="www/res/screen/android/drawable-port-mdpi-screen.png" />

                    <splash density="port-hdpi" src="www/res/screen/android/drawable-port-hdpi-screen.png" />

                    <splash density="port-xhdpi" src="www/res/screen/android/drawable-port-xhdpi-screen.png" />

                    <splash density="port-xxhdpi" src="www/res/screen/android/drawable-port-xxhdpi-screen.png" />

                    <splash density="port-xxxhdpi" src="www/res/screen/android/drawable-port-xxxhdpi-screen.png" />

                </platform>

                <platform name="ios">

                    <icon height="57" platform="ios" src="www/res/icon/ios/icon.png" width="57" />

                    <icon height="114" platform="ios" src="www/res/icon/ios/icon@2x.png" width="114" />

                    <icon height="40" platform="ios" src="www/res/icon/ios/icon-40.png" width="40" />

                    <icon height="80" platform="ios" src="www/res/icon/ios/icon-40@2x.png" width="80" />

                    <icon height="50" platform="ios" src="www/res/icon/ios/icon-50.png" width="50" />

                    <icon height="100" platform="ios" src="www/res/icon/ios/icon-50@2x.png" width="100" />

                    <icon height="60" platform="ios" src="www/res/icon/ios/icon-60.png" width="60" />

                    <icon height="120" platform="ios" src="www/res/icon/ios/icon-60@2x.png" width="120" />

                    <icon height="180" platform="ios" src="www/res/icon/ios/icon-60@3x.png" width="180" />

                    <icon height="72" platform="ios" src="www/res/icon/ios/icon-72.png" width="72" />

                    <icon height="144" platform="ios" src="www/res/icon/ios/icon-72@2x.png" width="144" />

                    <icon height="76" platform="ios" src="www/res/icon/ios/icon-76.png" width="76" />

                    <icon height="152" platform="ios" src="www/res/icon/ios/icon-76@2x.png" width="152" />

                    <icon height="29" platform="ios" src="www/res/icon/ios/icon-small.png" width="29" />

                    <icon height="58" platform="ios" src="www/res/icon/ios/icon-small@2x.png" width="58" />

                    <icon height="87" platform="ios" src="www/res/icon/ios/icon-small@3x.png" width="87" />

                    <splash height="1136" platform="ios" src="www/res/screen/ios/Default-568h@2x~iphone.png" width="640" />

                    <splash height="1334" platform="ios" src="www/res/screen/ios/Default-667h.png" width="750" />

                    <splash height="2208" platform="ios" src="www/res/screen/ios/Default-736h.png" width="1242" />

                    <splash height="1242" platform="ios" src="www/res/screen/ios/Default-Landscape-736h.png" width="2208" />

                    <splash height="1536" platform="ios" src="www/res/screen/ios/Default-Landscape@2x~ipad.png" width="2048" />

                    <splash height="768" platform="ios" src="www/res/screen/ios/Default-Landscape~ipad.png" width="1024" />

                    <splash height="2048" platform="ios" src="www/res/screen/ios/Default-Portrait@2x~ipad.png" width="1536" />

                    <splash height="1024" platform="ios" src="www/res/screen/ios/Default-Portrait~ipad.png" width="768" />

                    <splash height="960" platform="ios" src="www/res/screen/ios/Default@2x~iphone.png" width="640" />

                    <splash height="480" platform="ios" src="www/res/screen/ios/Default~iphone.png" width="320" />

                </platform>

                <platform name="wp8">

                    <icon height="99" platform="wp8" src="www/res/icon/wp8/ApplicationIcon.png" width="99" />

                    <icon height="159" platform="wp8" src="www/res/icon/wp8/Background.png" width="159" />

                    <splash height="1280" platform="wp8" src="www/res/screen/wp8/screen-portrait.jpg" width="768" />

                </platform>

                <platform name="windows">

                    <icon height="150" platform="windows" src="www/res/icon/windows/Square150x150Logo.scale-100.png" width="150" />

                    <icon height="30" platform="windows" src="www/res/icon/windows/Square30x30Logo.scale-100.png" width="30" />

                    <icon height="50" platform="windows" src="www/res/icon/windows/StoreLogo.scale-100.png" width="50" />

                    <splash height="300" platform="windows" src="www/res/screen/windows/SplashScreen.scale-100.png" width="620" />

                    <icon height="120" platform="windows" src="www/res/icon/windows/StoreLogo.scale-240.png" width="120" />

                    <icon height="44" platform="windows" src="www/res/icon/windows/Square44x44Logo.scale-100.png" width="44" />

                    <icon height="106" platform="windows" src="www/res/icon/windows/Square44x44Logo.scale-240.png" width="106" />

                    <icon height="70" platform="windows" src="www/res/icon/windows/Square70x70Logo.scale-100.png" width="70" />

                    <icon height="71" platform="windows" src="www/res/icon/windows/Square71x71Logo.scale-100.png" width="71" />

                    <icon height="170" platform="windows" src="www/res/icon/windows/Square71x71Logo.scale-240.png" width="170" />

                    <icon height="360" platform="windows" src="www/res/icon/windows/Square150x150Logo.scale-240.png" width="360" />

                    <icon height="310" platform="windows" src="www/res/icon/windows/Square310x310Logo.scale-100.png" width="310" />

                    <icon height="150" platform="windows" src="www/res/icon/windows/Wide310x150Logo.scale-100.png" width="310" />

                    <icon height="360" platform="windows" src="www/res/icon/windows/Wide310x150Logo.scale-240.png" width="744" />

                    <splash height="1920" platform="windows" src="www/res/screen/windows/SplashScreenPhone.scale-240.png" width="1152" />

                </platform>

                <access origin="*" />

                <allow-navigation href="*" />

                <allow-intent href="*" />

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

            </widget>

             

            This is my config.xml and I have whitelist plugin installed.

            head.png

             

            As you can see in my head I don't have CSP meta tag.

            • 3. Re: Show image from external source
              risingj Adobe Employee

              Okay, that is a bit of weirdness happening here.

              When you load your app with the developer app, it is (typically) being served from a local computer , which means there needs to special permissions added to the csp.  The 'phonegap serve' command does this by injecting a csp into your html file.

              Typically this injection will just add a couple needed permissions, and not affect your app, however, in this case because there is not a csp present the injection is forcing your app to be MORE restricted, instead of less.

               

              We are working on a patch for this particular case, in the meantime, if you add a csp to your index.html that allows internet based image sources, you should be fine.

              Something like:

              <meta http-equiv="Content-Security-Policy" content="image-src *">

               

              Or if you still want to be restictive:

              <meta http-equiv="Content-Security-Policy" content="image-src http://imshopping.rediff.com">

               

              Please report back here if this fixes the issue for you.

              • 4. Re: Show image from external source
                miland11729202 Level 1

                I added that meta tag but still no joy. In browser everything works but in PhoneGap Developer I can see just image placeholder. :/

                Screenshot_13.pngScreenshot_SmartSelect_2017-03-09-02-37-22.png

                Screenshot_12.png

                • 5. Re: Show image from external source
                  risingj Adobe Employee

                  sorry, it should be

                   

                  <meta http-equiv="Content-Security-Policy" content="img-src *;">

                  • 6. Re: Show image from external source
                    risingj Adobe Employee

                    Verified!

                     

                    <!DOCTYPE html>

                     

                    <html>

                        <head>

                            <meta http-equiv="Content-Security-Policy" content="img-src *">

                        </head>

                        <body>

                        <img src="http://imshopping.rediff.com/imgshop/80-90/shopping/pixs/4585/c/Cu_11515095._cute-basket-o f-fresh-pink-roses-flower-gift-282.jpg">

                            <script type="text/javascript" src="cordova.js"></script>

                        </body>

                    </html>

                    • 7. Re: Show image from external source
                      miland11729202 Level 1

                      It's working now! Thank you!

                      • 8. Re: Show image from external source
                        risingj Adobe Employee

                        Glad I could help!