Splash screen display black screen in ionic

Question

I am use vs2015 for editor.
here is my config.xml file
I have already install cordova-splashscreen plugin
in my app icon already display but splash screen doesn't display

<?xml version="1.0" encoding="utf-8"?>
<widget id="com.ionicframework.ionicblankapp" version="0.0.1"  xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>ionic-blankapp</name>
<description>
An Ionic Framework and Cordova project.
</description>
<author email="[email protected]" href="http://example.com.com/">
Your Name Here
</author>
<content src="index.html" />
<access origin="*" />
 <preference name="webviewbounce" value="false" />
 <preference name="UIWebViewBounce" value="false" />
 <preference name="DisallowOverscroll" value="true" />
 <preference name="android-minSdkVersion" value="16" />
 <preference name="BackupWebStorage" value="none" />
 <feature name="StatusBar">
   <param name="ios-package" onload="true" value="CDVStatusBar" />
 </feature>
  <preference name="KeepRunning" value="True" />
 <preference name="ShowTitle" value="True" />
 <preference name="InAppBrowserStorageEnabled" value="True" />
 <preference name="SuppressesIncrementalRendering" value="True" />
 <preference name="windows-target-version" value="10.0" />

 <preference name="SplashScreen" value="foo" />
 <preference name="SplashScreenDelay" value="10000" />

 <icon src="resources/icon.png" />

 <plugin name="cordova-plugin-device" spec="~1.1.1" />
 <plugin name="cordova-plugin-console" spec="~1.0.2" />
 <plugin name="cordova-plugin-whitelist" spec="~1.2.1" />
 <plugin name="cordova-plugin-statusbar" spec="~2.1.0" />
 <plugin name="ionic-plugin-keyboard" spec="~1.0.8" />
 <plugin name="cordova-plugin-splashscreen" version="3.1.0" />
 </widget>

Answer 1

Set your config.xml like the docs:

<platform name="android">
    <!-- you can use any density that exists in the Android project -->
    <splash src="res/screen/android/splash-land-hdpi.png" density="land-hdpi"/>
    <splash src="res/screen/android/splash-land-ldpi.png" density="land-ldpi"/>
    <splash src="res/screen/android/splash-land-mdpi.png" density="land-mdpi"/>
    <splash src="res/screen/android/splash-land-xhdpi.png" density="land-xhdpi"/>

    <splash src="res/screen/android/splash-port-hdpi.png" density="port-hdpi"/>
    <splash src="res/screen/android/splash-port-ldpi.png" density="port-ldpi"/>
    <splash src="res/screen/android/splash-port-mdpi.png" density="port-mdpi"/>
    <splash src="res/screen/android/splash-port-xhdpi.png" density="port-xhdpi"/>
</platform>

<platform name="ios">
    <!-- images are determined by width and height. The following are supported -->
    <splash src="res/screen/ios/Default~iphone.png" width="320" height="480"/>
    <splash src="res/screen/ios/Default@2x~iphone.png" width="640" height="960"/>
    <splash src="res/screen/ios/Default-Portrait~ipad.png" width="768" height="1024"/>
    <splash src="res/screen/ios/Default-Portrait@2x~ipad.png" width="1536" height="2048"/>
    <splash src="res/screen/ios/Default-Landscape~ipad.png" width="1024" height="768"/>
    <splash src="res/screen/ios/Default-Landscape@2x~ipad.png" width="2048" height="1536"/>
    <splash src="res/screen/ios/Default-568h@2x~iphone.png" width="640" height="1136"/>
    <splash src="res/screen/ios/Default-667h.png" width="750" height="1334"/>
    <splash src="res/screen/ios/Default-736h.png" width="1242" height="2208"/>
    <splash src="res/screen/ios/Default-Landscape-736h.png" width="2208" height="1242"/>
</platform>

<platform name="windows">
    <!-- images are determined by width and height. The following are supported -->
    <splash src="res/screen/windows/splashscreen.png" width="620" height="300"/>
    <splash src="res/screen/windows/splashscreenphone.png" width="1152" height="1920"/>
</platform>

<platform name="blackberry10">
    <!-- Add a rim:splash element for each resolution and locale you wish -->
    <!-- http://developer.blackberry.com/html5/documentation/rim_splash_element.html -->
    <rim:splash src="res/screen/blackberry/splashscreen.png"/>
</platform>

<preference name="SplashScreenDelay" value="10000" />

And make sure that you have all the splash files in their correct location and in their correct size

Answer 2

Take care that this line inside config.xml has the correct value, where screen has to be the name of the generated splashscreens.

<preference name="SplashScreen" value="screen" />

If you are unsure about the name of the generated splashscreen names take a look inside e.g. platforms/android/res/...

And if you call ionic resources the platform dependent values will be inserted into config.xml automatically. You just have to insert icon.png and splash.png in your resources directory.