How to insert image in a React Ionic Project running on top of Capacitor?

Question

I'm working on a React Ionic Project, running on Android and iOS and I'm using the latest versions of React, Ionic and Capacitor packages.

Ionic CLI       : 6.13.1 
Ionic Framework : @ionic/react 5.6.0

Capacitor:

   Capacitor CLI   : 3.0.0
   @capacitor/core : 3.0.0

I would like to add an image in the following page:

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>
          {/**insert the image here />*/}
         <img src="img1.png" alt="">
        </IonTitle>
      </IonToolbar>
    </IonHeader>
  );
};

export default Header;

I'm new to Ionic and I don't know in which folder to put the image, in order to be shown correctly after building the app and testing it on Android/iOS emulator. If someone would explain to me the process of inserting an image in the app, I would be really thankful. Thank you!

Assets folder structure:

Please check my assets folder. There's no imgs folder inside it. Should I create it? What should I do? — Ani, Jul 05 '21 at 13:25
you can directly put all image inside assets folder but for better understanding create imgs folder and put all images inside it. — Najam Us Saqib, Jul 05 '21 at 13:29
oki, thank you :) Only one more question: My imgs folder will be included automatically in build folder after my command: `ionic build` ? Do I need to do anything else? — Ani, Jul 05 '21 at 13:34

How to insert image in a React Ionic Project running on top of Capacitor?

0 Answers0