如何在基于Capacitor运行的React Ionic项目中插入图片

1. 图片存放位置 #

你当前使用的Ionic 5 + Capacitor 3版本，所有需要直接引用的静态图片统一存放在项目根目录的public文件夹下，建议新建二级目录分类存放，比如public/assets/images，将你的img1.png放入该目录即可。
注意：不要将静态图片放在src文件夹下通过相对路径直接引用，原生容器打包后会无法识别路径

2. 组件内引用写法 #

推荐使用Ionic自带的IonImg组件，相比原生img对移动端适配性更好，路径使用绝对路径寻址，从静态资源根目录开始写：

<IonImg src="/assets/images/img1.png" alt="页面logo" />

修改后的Header组件完整代码如下：

import React from "react";
import {
  IonHeader,
  IonTitle,
  IonToolbar,
  IonIcon,
  IonMenuToggle,
  IonButton,
  IonButtons,
  IonImg,
} from "@ionic/react";
import { menuOutline } from "ionicons/icons";

const Header: React.FC = () => {
  return (
    <IonHeader>
      <IonToolbar className="menu-header">
        <IonButtons slot="start">
          <IonMenuToggle>
            <IonButton>
              <IonIcon slot="icon-only" icon={menuOutline}></IonIcon>
            </IonButton>
          </IonMenuToggle>
        </IonButtons>
        <IonTitle>
          {/* 插入图片位置 */}
          <IonImg src="/assets/images/img1.png" alt="页面logo" />
        </IonTitle>
      </IonToolbar>
    </IonHeader>
  );
};

export default Header;

3. 打包同步验证步骤 #

修改完代码后按以下顺序执行命令，确保图片能同步到Android、iOS原生项目中：

• 执行ionic build构建前端代码，public下的所有资源会自动拷贝到构建产物build文件夹中
• 执行npx cap sync将构建产物同步到Android、iOS的原生项目目录下
• 打开Android Studio/Xcode运行模拟器测试即可正常显示图片

注意事项 #

• 路径开头必须加/，代表从静态资源根目录寻址，不要使用./或../这类相对路径
• 每次更新图片资源后都需要重新执行ionic build和npx cap sync，否则原生项目中的资源不会更新
• 如果图片体积过大，建议先压缩后再放入资源文件夹，减少安装包体积

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