Broken images

I’m doing a simple webpage and host on github pages, 

I was trying to put a simple python logo on the page, but it does not shown on the page, 

I belive the image is correctly uploaded since it is shown on media folder…

link : https://whtitefall.github.io/Webpage/

code : 

import python from './python.JPG';

function App() {
  //const props = useSpring({opacity: 1, from: {opacity: 0}})
  return <img scr={python} alt= "py logo" /> ;
}

well…I don’t know why, I copy paste the exact same code from react documentation, and it works … 

import React from 'react';
import logo from './logo.png'; // Tell Webpack this JS file uses this image

console.log(logo); // /logo.84287d09.png

function Header() {
  // Import result is the URL of your image
  return <img src={logo} alt="Logo" />;
}

export default Header;