React img tag issue with url and class

Question

I have the following simple react code in my JSX file:

/** @jsx React.DOM */

var Hello = React.createClass({
    render: function() {
        return <div><img src='http://placehold.it/400x20&text=slide1' alt={event.title} class="img-responsive"/><span>Hello {this.props.name}</span></div>;
    }
});

React.renderComponent(<Hello name="World" />, document.body);

The output in the DOM is as follows:

<div data-reactid=".0">
  <img src="http://placehold.it/400x20undefined1" data-reactid=".0.0">
  <span data-reactid=".0.1">
    <span data-reactid=".0.1.0">Hello </span>
    <span data-reactid=".0.1.1">World</span>
  </span>
</div>

I have two issues with it:

The image URL is rendered incorrectly, it is rendered as 'http://placehold.it/400x20undefined1'
The class on my image disappears

Any ideas?

rowbare · Accepted Answer · 2014-09-26 18:17:28Z

68

Remember that your img is not really a DOM element but a javascript expression.

This is a JSX attribute expression. Put curly braces around the src string expression and it will work. See http://facebook.github.io/react/docs/jsx-in-depth.html#attribute-expressions

In javascript, the class attribute is reference using className. See the note in this section: http://facebook.github.io/react/docs/jsx-in-depth.html#react-composite-components

/** @jsx React.DOM */

var Hello = React.createClass({
    render: function() {
        return <div><img src={'http://placehold.it/400x20&text=slide1'} alt="boohoo" className="img-responsive"/><span>Hello {this.props.name}</span></div>;
    }
});

React.renderComponent(<Hello name="World" />, document.body);

answered Sep 26, 2014 at 18:17

rowbare

7046 silver badges3 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ruff Over a year ago

And if you check the output, you can realise that the alt attribute is also missing. :(

pesho hristov Over a year ago

The alt should be like alt={"boohoo"}.

kadzielawa konrad · Accepted Answer · 2017-08-20 21:03:10Z

0

var Hello = React.createClass({
    render: function() {
      return (
        <div className="divClass">
           <img src={this.props.url} alt={`${this.props.title}'s picture`}  className="img-responsive" />
           <span>Hello {this.props.name}</span>
        </div>
      );
    }
});

answered Aug 20, 2017 at 21:03

kadzielawa konrad

4635 silver badges7 bronze badges

Collectives™ on Stack Overflow

React img tag issue with url and class

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related