As the title says, why do Image.src() operations using explicit relative paths e.g:

    picture = new Image();
    picture.onload = function()
    {
        console.log('Loaded');
    }
    picture.src = './assets/picture.png'; // Assume directory is correct relative path

or:

    const picture = require('./assets/picture.png');  // Assume directory is correct relative path

    picture = new Image();
    picture.onload = function()
    {
        console.log('Loaded');
    }
    picture.src = picture;

Not work at all (picture.onload never loads, even though .src is assigned after it (in both cases)). But, then:

    import picture from './assets/picture.png';

    picture = new Image();
    picture.onload = function()
    {
        console.log('Loaded');
    }
    picture.src = picture;

Works perfectly fine and the onload is almost instant. I'm looking to mass-import images, therefore I'll be using:

    const pictures = importAll(require.context('./assets', false, /\.png/));

However, since explicit/require don't work, this also doesn't work. Not sure what I'm doing wrong here.