I am using the code from this codepen: https://codesandbox.io/s/step-04-9gyz8?from-embed=&file=/index.html:506-652

The problem I am having is with the sourcing of the image in the html. When I link the src attribute to an image in my directory it displays correctly but not in the data-hover. The data-hover only displays an image if I link to an image external of my directory sourced from unsplash. I also looked in the console and the data-hover attribute is not displaying the image.

Here is how I added the img tag with it not working.

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

Here is it working incorrectly for me but displaying the code with the unsplash link mentioned.

<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" />

This is the constructor that loads the img from 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);
    });
  }

In the figure.js file is where the request for the image source is found. Would anyone know the reasoning to this and how to fix it?