How to insert image using React.js

Question

I’m starting in React, and how do I insert an image that sits on top of my background, which is already an image? The code is as follows:

import React from 'react'

import Img from 'react-image'

import teacher1 from "./images/teacher1.jpg"

import Navbar from './Navbar'

const AboutPage = () => {

  return (

    <div>
      <Navbar />
      <div className='header-container flex row center-center full-view' >
      <h1 id="sobre">Esse sistema serve para facilitar o planejamento <br/> da carga horária de cada turma, 
          bem como <br/> horário de aulas, docentes que estão <br/> ministrando aula em determinada hora e sala.</h1>
          <img src="./images/teacher1.jpg"/>
          <img src="./images/teacher2.jpg"/>

    </div>
    </div>
  )
}

export default AboutPage;

I tried to insert two images, but failed attempt.

Answer 1

The answer is simpler than it looks, it’s pretty much the same thing you do with HTML, but add the concept of React.

import React from 'react'
import imgagemEscolhida from 'endereco-da-imagem'

export default () => <img src={imgagemEscolhida}/>

Answer 2

Try this way to import the image and then use it as a "component"

import React from 'react'

import Img from 'react-image'

import Teacher1 from "./images/teacher1.jpg"

import Teacher2 from "./images/teacher2.jpg"

import Navbar from './Navbar'

const AboutPage = () => {

  return (

    <div>
      <Navbar />
      <div className='header-container flex row center-center full-view' >
      <h1 id="sobre">Esse sistema serve para facilitar o planejamento <br/> da carga horária de cada turma, 
          bem como <br/> horário de aulas, docentes que estão <br/> ministrando aula em determinada hora e sala.</h1>
          <img src={Teacher1 }/>
          <img src={Teacher2 }/>


    </div>
    </div>
  )
}

export default AboutPage;