Моя цель - иметь возможность передать URL-адрес изображения и решить, в зависимости от его размеров, хочу ли я его использовать. Для этого я использую функцию, которую я нашел в переполнении стека, которая должна возвращать размеры изображения, используя только URL-адрес.

Это был точный код, который они ответили:

function getMeta(url){
    var img = new Image();
    img.onload = function(){
        alert(this.width + " " + this.height)
    };
    img.src = url;
}

Для моих целей мне нужно иметь возможность оценивать ширину и высоту, поэтому я изменил их как таковые и дайте мне знать, если я нарушил какое-то важное правило js:

function getMeta(url){
    var img = new Image();
    img.onload = function(){
        return [this.width, this.height]
    };
    img.src = url;
}

С помощью этой функции я могу вызвать ее с помощью другой функции, которую я придумал:

function backgroundCss(url){
    const dims = getMeta(url);
    return (dims[0] >= 1000 && dims[1] >= 300) ? `url(${url})` : "none"
}

и назовите это в моем атрибуте стиля:

<Grid item xs = {15} md = {6} style = {{
      backgroundImage: backgroundCss(url)
}}>

На мой неопытный взгляд мой подход кажется довольно разумным и безошибочным, но я продолжаю получать эту ошибку, говорящую, что Image() не определено. (что бы это ни стоило, я попытался просто скопировать и вставить неизмененную версию функции и вызвать ее с помощью кнопки, и она работала нормально, предупредив меня о загрузке с размерами)

Я получил ту же ошибку при попытке немного другого подхода:

const [imageText, setImageText] = React.useState(null);
function getMeta(url){
    var img = new Image();
    img.src = url;
    if (imageText == null){
        img.onload = () => setImageText((img.width >= 1000 && img.height >= 300) ? `url(${url})` : "none");
        getMeta(url);
        return false;
    }
    return imageText;
}
...
<Grid item xs = {15} md = {6} style = {{
      backgroundImage: getMeta(url)
}}>

Возможно ли то, что я пытаюсь сделать? Где я ошибся здесь?

Редактировать: это правильное направление?

function getMeta(url){
    return new Promise((resolve) => {
        var img = new Image();
        img.onload = function(){
            resolve([this.width, this.height]);
        };
        img.src = url;
    })
}

function backgroundCss(url) {
    getMeta(url).then((dims) => {
        return (dims[0] >= 1000 && dims[1] >= 300) ? `url(${url})` : "none"
    })
}