javascript - Access props inside quotes in React JSX

Question

In JSX, how do you reference a value from props from inside a quoted attribute value?

For example:

<img className="image" src="images/{this.props.image}" />

The resulting HTML output is:

<img class="image" src="images/{this.props.image}">

Answer 1

React (or JSX) doesn't support variable interpolation inside an attribute value, but you can put any JS expression inside curly braces as the entire attribute value, so this works:

<img className="image" src={"images/" + this.props.image} />