How do I use a new Image() in react

Question

I am trying to keep an image from reloading when the state changes. The below image variable is passed into the props of a custom react component.
var img = new Image(); I've already set the src, title, desc, etc.

So my question is. In the custom react component, how do I take the image object (now a prop titled img) and display it in the render function?

I've already tried

render: function(){
  return <div>{this.props.img}</div>
}

But I keep getting a DOM elements are not valid child of React components error.

Have you tried writing the image element in as JSX? ex: `return
` You *may* be able to write it cleaner with a spread operator: ``. — Yair, Feb 26 '16 at 17:31
This essentially just passes the string in, which causes the — Heath, Feb 26 '16 at 19:47
Here's your answer: https://stackoverflow.com/a/67416031/2612640 -- tl;dr you can use the .outerHTML property to get the html string and combined with `dangerouslySetInnerHTML` prop, voila. — Sgnl, May 27 '22 at 09:36

score 8 · Accepted Answer · answered Feb 26 '16 at 20:53

I think what you're trying to do is create a new DOMNode of the Image variety and render that as a child of the <div>. If that's right, you're doing something React isn't made to do. Two options:

Option 1 (Best): Render the image tag in your React component template

render: function() {
    return (
        <div>
            <img src={'url-to-your-image'} />
        </div>
    );
}

Option 2 (Not as good): Render the image as an HTML string entity

renderHTML: function() {
    return {
        __html : '<img src="url-to-your-image" />'
    }
},

render: function() {
    return (
        <div dangerouslySetInnerHTML={this.renderHTML()} />
    );
}

Hope that helps!

Essentially, both of these options create a new image with an `` tag. That's not what the questioner wants, which is reusing an `Image` object that's already created with JavaScript. — Rockallite, Nov 13 '19 at 00:31

score 8 · Answer 2 · answered Jun 26 '20 at 23:14

8

The Image constructor returns an HTMLImageElement interface.

So to render your img prop, which as you mention was created using var img = new Image(), you basically have to create an element and render it.

You can do this via JSX

const YourComponent = ({img}) => <img src={img.src} alt="foo" />

or

Use the React.CreateElement syntax if you need to do it programmatically.

const YourComponent = ({img}) => {

  const myImage = React.createElement("img", {
     src: img.src,
     // any other image attributes you need go here
  }, null);

  return (
    {myImage}
  );
}

answered Jun 26 '20 at 23:14

Joe Seifi

1,557
1
12
15

new Image() hard to use except as props in React. Are there performance considerations for all `img.props` here for changes to img object? Virtual DOM mounts & does re-render (or match?) `img.props.style` changes, but not if field is defined outside of the sync func. Second option guides us to use static props like `style={{width:"100%}}` so I choose to export `class
` wrapping {`React.createElement for import().then(img=>img.default)` & `window.URL.createObjectURL(blob), src`}, as only change's css `calc` not all `props`, which I only assume matters
– Nick Carducci for Carface Bank Jun 07 '21 at 18:18

How do I use a new Image() in react

2 Answers2

Linked