如何在Ionic打包网站应用的Home页面添加加载图片

Hey there! Let's sort out that blank Home page issue and replace the plain loading text with a proper image—so when users exit the in-app browser, they'll see a polished screen instead of something incomplete. Here's what you need to do:

Step 1: Add Your Image to the Project #

First, drop your desired image into the src/assets/img/ folder of your Ionic project (create the img subfolder if it doesn't exist yet). Let's say you name the image home-bg.png for this example.

Step 2: Update the Home Page Template #

Replace the simple text template with one that includes your image, and add some basic styling to make it fit the screen nicely. Inline styles work great for this quick use case.

Step 3: Modify the home.ts Code #

Here's the updated code for your home.ts file, with the image integrated properly:

import { Component } from '@angular/core';
import { NavController, Platform } from 'ionic-angular';
import { InAppBrowser } from '@ionic-native/in-app-browser';
import { DocumentViewer, DocumentViewerOptions } from '@ionic-native/document-viewer';

@Component({
  template: `
    <div style="width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; background-color: #fff;">
      <img src="assets/img/home-bg.png" style="max-width: 100%; max-height: 100%; object-fit: contain;" alt="Home Screen">
    </div>
  `
})
export class HomePage {
  constructor(
    private iab: InAppBrowser,
    public platform: Platform,
    private document: DocumentViewer
  ) {
    platform.ready().then(() => {
      let browser = this.iab.create('http://study.bfa.org/', '_blank', {zoom:'no',location:'no'});
      browser.show();
    });
  }
}

Key Details to Note: #

• The <div> uses flexbox to center the image perfectly across the full screen height (100vh), so it won't leave any empty gaps.
• object-fit: contain ensures your image scales correctly without stretching, while fitting neatly within the screen bounds.
• Double-check the src path matches where you placed your image—adjust the filename or folder if you used something different.

Now when your app launches, it’ll show the image briefly before opening the in-app browser, and when users exit the browser, they’ll land back on this complete image screen instead of a blank or text-only page.

内容的提问来源于stack exchange，提问作者Chris Stewart