How can I find out the dimensions of a DOM-mounted image?

Question

React

There is a component that draws a certain picture

renderImage() {
    const {
      img,
    } = this.state;

    return (
              <img
                id="bImage"
                src={img}
              />
    );
  }

you need to get the size of this image from the browser

const image = document.getElementById('bImage');
???

Answer 1

create a function that renders the image.

const { img } = this.state;
const image = new Image();
img.src = image;

The width and height will be in the image.width and image.height properties. But keep in mind that loading an image is an asynchronous process, so you need to access the properties in image.onload = () => {}

Answer 2

uuuuuuuuuuuuuuuuu.

let image_width = image.clientWidth;
let image_height = image.clientHeight;