Estoy usando el código de este codepen: https://codesandbox.io/s/step-04-9gyz8?from-embed=&file=/index.html:506-652

El problema que tengo es con el abastecimiento de la imagen en el html. Cuando vinculo el atributo src a una imagen en mi directorio, se muestra correctamente pero no en el desplazamiento de datos. El desplazamiento de datos solo muestra una imagen si me vinculo a una imagen externa de mi directorio procedente de unsplash. También miré en la consola y el atributo de desplazamiento de datos no muestra la imagen.

Así es como agregué la etiqueta img sin que funcionara.

 <img src="./img/gooOver.jpg" data-hover="./img/gooUnder.jpg" class="tile__image" alt="My image" width="400" height="300" />

Aquí está funcionando incorrectamente para mí, pero muestra el código con el enlace de unsplash mencionado.

 <img src="./img/gooOver.jpg" data-hover="https://images.unsplash.com/photo-1522609925277-66fea332c575?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80" class="tile__image" alt="My image" width="400" height="300" />

Este es el constructor que carga el img de data-hover

 export default class Figure { constructor(scene, cb) { this.$image = document.querySelector(".tile__image"); this.scene = scene; this.callback = cb; this.loader = new THREE.TextureLoader(); this.image = this.loader.load(this.$image.src, () => { this.start(); }); this.hover = this.loader.load(this.$image.dataset.hover); this.$image.style.opacity = 0; this.sizes = new THREE.Vector2(0, 0); this.offset = new THREE.Vector2(0, 0); this.mouse = new THREE.Vector2(0, 0); window.addEventListener("mousemove", (ev) => { this.onMouseMove(ev); }); }

En el archivo figure.js es donde se encuentra la solicitud de la fuente de la imagen. ¿Alguien sabría el motivo de esto y cómo solucionarlo?