JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<div id="map"></div>

CSS

#map {
  height: 800px;
}

JavaScript

const imageUrl =
  "https://upload.wikimedia.org/wikipedia/commons/7/7c/Kaohsiung_Skyline_2020.jpg"
const imgWidth = 3236
const imgHeight = 2157

var map = L.map("map", {
  minZoom: 1,
  maxZoom: 4,
  crs: L.CRS.Simple,
  zoomControl: false,
  zoomSnap: 0,
  attributionControl: false,
})

var southWest = map.unproject([0, imgHeight], map.getMaxZoom())
var northEast = map.unproject([imgWidth, 0], map.getMaxZoom())

const imgBounds = new L.LatLngBounds(southWest, northEast)
map.setMaxBounds(imgBounds)
map.fitBounds(imgBounds)
map.setZoom(4)

L.imageOverlay(imageUrl, imgBounds).addTo(map)

map.on("click", function (e) {
  const marker = new L.Marker(e.latlng).addTo(map)

	// Here I want to get the pixel coordinate of the image
  var imagePixelCoords = map.project(e.latlng, map.getZoom())
  console.log("imagePixelCoords: " + imagePixelCoords)
})