<div id="root"></div>

html,
body {
  height: 100%;
}

#root {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: #0F141A;
}

.app {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

.reload {
  padding: 8px
}

.image {
  display: block;
  width: 400px;
  height: 225px;
  opacity: 0;
  transition: opacity 1s linear;
}

const imageUrl = "https://assets.codepen.io/721250/apple-pie1.jpg";

function FadeInImage({ src }) {
  const [loaded, setLoaded] = React.useState(false);
  return (
    <img
      className="image"
      src={src}
      onLoad={() => setLoaded(true)}
      style={
        loaded ? { opacity: 1 } : {}
      } />
  )
}

function App() {
  const [key, setKey] = React.useState(0);
  return (
    <div class="app">
      <FadeInImage src={imageUrl} key={key} />
      <button class="reload" onClick={() => setKey(k => k + 1)}>再読み込み</button>
    </div>
  );
}

ReactDOM.render(
  <App />,
  document.querySelector("#root")
);