How to drag a jpg texture onto a sphere?

Question

three.js

Created a site on vue, created a scene, a sphere, etc. If the sphere is MeshPhongMaterial and it has, for example, only color, then everything works fine. I try to put on it the texture of the earth in jpg, png - the result is no errors, but the scene is empty. How to load and apply a texture in jpg format and the like? What are the rules and restrictions on the file itself, if any?

mounted(){
    let canvas = document.getElementById('myscene');
    let width = window.innerWidth;
    let height = window.innerHeight;
    var mouse = new THREE.Vector2(), INTERSECTED;
    let renderer = new THREE.WebGLRenderer({
      canvas: canvas,
      antialias: true,
      alpha: true
    });

    renderer.setPixelRatio(window.devicePixelRatio > 1 ? 2 : 1);
    renderer.setSize(width, height);
    var camera = new THREE.PerspectiveCamera(40, width / height, 1, 1000);
    let texture = new THREE.TextureLoader().load('../assets/earth-small.jpg');
    //SCENE
    let scene = new THREE.Scene();

    let group = new THREE.Group();
    scene.add(group);
    camera.position.set(0, -150, 50);
    camera.lookAt(10, 20, 30);
    var controls = new OrbitControls(camera, renderer.domElement);

    var light = new THREE.AmbientLight( 0x404040 ); // soft white light
    scene.add( light );

    //BODY
    var geometry = new THREE.SphereGeometry( 25, 32, 32 );
    
    var material = new THREE.MeshBasicMaterial( { map: texture } );
    var sphere = new THREE.Mesh( geometry, material );
    scene.add( sphere );

    let time = 0;
    function Render() {
      time++;
      renderer.render(scene, camera);
      window.requestAnimationFrame(Render);
    }
    Render();

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