Image is Not Load on planeGeometry in Three Js

Question

Hello Community I have 1 issue Regarding Image is not showing on the PlaneGeometry in Three JS. Whenever i am load image the plane is going to black and not image refection is done here and with it no error are showing in console.

Please Give me Right Direct though which i can load image on planeGeometry.

Black Box is PlaneGeometry and white Box is also PlaneGeometry

function init(){
console.log("inner Function");

const canvas = document.querySelector('#c');

// renderer
const renderer = new THREE.WebGLRenderer({
    canvas,
    alpha: true,
});
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild(renderer.domElement);
    
// Scene
const scene = new THREE.Scene();

// camera
const camera = new THREE.PerspectiveCamera(
    60, 
    window.innerWidth / window.innerHeight, 
    1, 
    1000
    );
    camera.position.set(0, 0, 4);

// Load image locally method-1
// const textureLoader = new THREE.TextureLoader();
// scene.background = textureLoader.load('../asset/Backgound.png');

// Load Image method-2
// const textureLoader = new THREE.TextureLoader();
// loader.load('./asset/Backgound.png' , function(texture)
//             {
//             scene.background = textureLoader;  
//             });

const planeGeometry = new THREE.PlaneGeometry(2, 2);
// const texture = new THREE.TextureLoader().load('./asset/Set.png');
// const planeMaterial = new THREE.MeshBasicMaterial({color: 0xffffff});
// const planeMaterial = new THREE.MeshBasicMaterial({map: texture});
// const planeMaterial = new THREE.MeshBasicMaterial({color: "rgb(100%, 0%, 0%)"});

const planeMaterial = new THREE.MeshBasicMaterial({
    color: "#fafafa",
    side: THREE.DoubleSide,
    // visible: false,
});

// const planeMaterial = new THREE.MeshLambertMaterial({map: new THREE.TextureLoader().load("./asset/Set.png") })

const plane = new THREE.Mesh(planeGeometry, planeMaterial);
scene.add(plane)

plane.position.x = 1.5
plane.position.y = -0.7
// plane.position.z = -4

// const textureImage = '../asset/ping_pong_ball.png';
const texture2 = new THREE.TextureLoader().load('./asset/ping_pong_ball.png');

const plane2Geometry = new THREE.PlaneGeometry(2, 2);
// // const plane2Material = new THREE.MeshBasicMaterial({color: 0xffffff});
// var img = new THREE.MeshBasicMaterial({ //CHANGED to MeshBasicMaterial
//     map:THREE.ImageUtils.loadTexture('./asset/Set.png')
//     // map:THREE.TextureLoader('../asset/ping_pong_ball.png')
// });
// img.map.needsUpdate = true; //ADDED

const plane2Material = new THREE.MeshBasicMaterial({map: texture2});
const plane2 = new THREE.Mesh(plane2Geometry, plane2Material);
plane2.overdraw = true;
scene.add(plane2);

plane2.position.x = -1.5
plane2.position.y = -0.7

// const axesHelper = new THREE.AxesHelper(10);
// scene.add(axesHelper);



renderer.render(scene, camera)

window.addEventListener('resize', function(){
    camera.aspect = window.innerWidth /window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight)

})

} init();

in This image where is black plane the actually there is image but due to image load the plane is change to black color please help.