Why is the image not showing up?

Question

React

import React from 'react'
import {render} from 'react-dom'
import './index.css'

class Header extends React.Component {
  

  render() {
      return <div>
       
      <img className = "libr" src={a.Url} alt={a.name} />
                                                              
       <h1>Main</h1>
       <h1>Forum</h1>
       <h1>Biography</h1>
       <h1>Sections</h1>

      
      </div>
  }
}
const a = {
 name: "Library",
 Url: "./libr.png"
}
render(
    <Header/>,
    document.getElementById('root')
)

Here is my React code. I don't understand why the image is not rendering? The application was created using npm create-react-app. I even looked at the offline documentation. Nothing helps

Answer 1

nor the right path to the picture