Javascript 根据图像有条件地设置样式属性'；s大小，通过url获取

我的目标是能够传入一个图像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)
}}>

问题#1，异步代码

onload

处理程序中的

return

语句没有执行您认为的操作：

函数getMeta（url）{ var img=新图像（）； img.onload=函数（）{ 返回[this.width，this.height] //^^^这将返回'onload'处理程序，而不是'getMeta'` }; img.src=url； } 为了解决这个问题，您需要使用“回调”或

Promise

，以便在返回值可用时异步提供返回值

回拨 函数getMeta（url，回调）{ var img=新图像（）； img.onload=函数（）{ //使用返回值触发提供的回调 回调（[this.width，this.height]）； }; img.src=url； } //像这样使用 getMeta（“…”，（dims）=>{ 控制台日志（dims）； }); 允诺 函数getMeta（url，回调）{ 返回新承诺（（解决）=>{ var img=新图像（）； img.onload=函数（）{ //使用返回值解析承诺 解析（[this.width，this.height]）； }; img.src=url； }) } //像这样使用 getMeta（“…”）。然后（（dims）=>{ 控制台日志（dims）； }); 问题#2，反应异步渲染 由于react组件渲染函数是同步的，我相信您需要为此添加一些状态。您可以使用另一个

useState

钩子，就像您已经拥有的钩子一样。比如：

const[imageUrl，setImageUrl]=React.useState（null）；
//...
//一旦状态可用，立即更新状态
getMeta（“…”）。然后（（dims）=>{
setImageUrl（“…”）；
});

它抱怨

图像

未定义。尝试将其与

document.createElement（'img'）

可能已定义的文件交换？第一个函数可以工作，它使用的是

Image

，所以我认为这是一个更大的问题。我从来没有见过有人说要导入@RikinI，但我只是查了一下，很明显它是有效的JS构造函数。可能是React认为不是这样，不确定谢谢你的详细回答-我对承诺比较熟悉，所以我选择了这条路线，并更新了我答案的底部，以显示我是如何解释你的答案的，目前我已经尝试将其打印为原始html，但是我的

backgroundCss

函数没有返回anything@ark0n我添加了一些关于与react一起使用的信息

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"
    })
}