在 Ionic 3 Project 中是否可以在初始屏幕中使用 JPG 图像而不是 PNG 图像？答案

【问题标题】：Can It be possible to use JPG images in splash screens instead of PNG images in Ionic 3 Project?在 Ionic 3 Project 中是否可以在初始屏幕中使用 JPG 图像而不是 PNG 图像？
【发布时间】：2018-08-28 06:12:22
【问题描述】：

我有一个关于 Ionic 3 的工作项目，我想使用 JPG 图像作为所有尺寸的启动画面。是否可以在 Ionic 中使用 JPG 图像作为初始屏幕，我没有找到任何关于此的文档。

【问题讨论】：

标签： ionic-framework ionic3 png jpeg splash-screen

【解决方案1】：

是的，这是可能的。 Ionic 根据Ionic doc 实现了 Cordova 的启动画面插件。这个插件接受 png 和 jpg。这是doc from Cordova。

您必须在 config.xml 文件中指定图像文件（例如，一种屏幕尺寸，在 android 上）：

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

并在应用程序中使用它：

import { SplashScreen } from '@ionic-native/splash-screen';

constructor(private splashScreen: SplashScreen) { }
...
this.splashScreen.show();
...
this.splashScreen.hide();

【讨论】：

我也是这样做的。一切正常，但是当我使用生产版本构建时。然后我收到此错误 - (node:16551) UnhandledPromiseRejectionWarning: Error: /var/www/html/bhojpuri-app/platforms/android/gradlew: Command failed with exit code 1 错误输出：platforms/android/res/drawable- land-ldpi/screen.png：错误：无法读取 PNG 签名：文件不以 PNG 签名开头。
您的文件是 sreeen.png 吗？如果是，它是否具有正确的 png 格式？

【解决方案2】：

这似乎是一个老问题，但仍然有效。所以，对于不断来这里的人。

注意：如果您的初始屏幕是自然图像（例如一组人的照片，而不是绘图），则使用 jpg 初始屏幕会显着减小文件包的大小。

此解决方案仍适用于 Ionic 6。

cordova-plugin-splashscreen 可以使用 jpg 图像。如何做到这一点：

将您的 splash.png 初始图像放入 Ionic 项目的 resources 目录中。
运行
```
# Install cordova-res if necesary
npm i -g cordova-res

# Generate the resources in png format
ionic cordova resources --splash
```
这将在resources/<platform>/splash 目录中为每个平台生成（以 png 格式）所有必需的初始资源，并更新您的config.xml 以引用新资源。

现在使用imagemagick 转换初始资源并更新config.xml：

# Install imagemagick if necessary.
sudo apt install -y imagemagick

# Use mogrify to convert all splash screen assets to jpg
mogrify -format jpg resources/*/splash/*.png

# Remove all the previously generated `.png` assets
rm resources/*/splash/*.png

# Update the config.xml
cat config.xml | sed -E 's/^(.*splash.*)\.png(.*)$/\1.jpg\2/' > config2.xml && mv config{2,}.xml

检查新的捆绑包大小，看看它减少了多少。

【讨论】：