Question

44

How do I use a new Image() in react

rated 0 times [ 49] [ 5] / answers: 1 / hits: 27552 / 8 Years ago, fri, february 26, 2016, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

bradleymoisesy

Add To Favorites

Follow

Total Points: 121

Total Questions: 105

Total Answers: 95

Location: Nepal

Member since Mon, Jan 4, 2021

3 Years ago

answered 8 Years ago jaredsages · Accepted Answer

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!