Question

我正在使用reactjs，并且我的iamge有一个组件：

这是我的代码：

import  React from "react";
require("../../../../css/story/body/story-body.css");
export class StoryImage extends  React.Component{

render() {
    var imgHtmlElement="";
       var img = new Image();
        img.src= "https://upload.wikimedia.org/wikipedia/commons/1/1c/Aspen-PopulusTremuloides-2001-09-27.jpg";
        var height = img.height;
        var width = img.width;

        console.log("height: "+height+"width: "+width);
        imgHtmlElement=<img
            src={this.props.imgUrl!=undefined?this.props.imgUrl.desktopUri:""}
            className="img-responsive11" alt="" />

    return (
        <div>
        {imgHtmlElement}
        </div>);
}

}

我要做的是在将图像加载到之前先读取图像源中的高度和宽度，然后根据其尺寸决定。

正如您在我的代码中看到的那样，我正在尝试通过以下方式做到这一点：

 var img = new Image();
        img.src= "https://upload.wikimedia.org/wikipedia/commons/1/1c/Aspen-PopulusTremuloides-2001-09-27.jpg";
        console.log(img.src);
        var height = img.height;
        var width = img.width;

        console.log("height: "+height+"width: "+width);

这是我得到的一切

height: 0 width: 0

我的方法有什么问题？有人可以帮忙吗？

Answer 1

在检查图像width和height之前，您必须等待图像加载。

您可以使用onload属性：

let img = new Image();
let height, width;
img.onload = () => {
  height = img.height;
  width = img.width;

  console.log("height: " + height + "width: " + width);
};
img.src = "https://upload.wikimedia.org/wikipedia/commons/1/1c/Aspen-PopulusTremuloides-2001-09-27.jpg";

无法从源读取图像的高度/宽度

1 个答案: