I am doing THREEjs codes and tried to wrap a picture with sphere. I made a texture loader and imported the photo which I downloaded and I got this error

GET http://192.168.1.27:8080/img/globe1.jpg 404 (Not Found) Image (async) load @ three.module

and the path of the picture is correct and I don't know what is wrong in it

import "./style.css";
import * as THREE from "three";

// Canvas
const canvas = document.querySelector("canvas.webgl");

// Scene
const scene = new THREE.Scene();

// Object
// const geometry = new THREE.BoxGeometry(1, 1, 1);
// const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
// const mesh = new THREE.Mesh(geometry, material);
// scene.add(mesh);

// Sizes
// const sizes = {
//   width: 800,
//   height: 600,
// };

// Camera
const camera = new THREE.PerspectiveCamera(
  75,
  innerWidth / innerHeight,
  0.1,
  1000
);
// camera.position.z = 3;
scene.add(camera);

// Renderer
const renderer = new THREE.WebGLRenderer({
  canvas: canvas,
});
renderer.setSize(innerWidth, innerHeight);

// create a sphere
const sphere = new THREE.Mesh(
  new THREE.SphereGeometry(5, 50, 50),
  new THREE.MeshBasicMaterial({
    // color: 0xff0000,
    map: new THREE.TextureLoader().load("../img/globe1.jpg"),
  })
);
scene.add(sphere);
console.log(sphere);
camera.position.z = 10;

function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}
animate();