Access props inside quotes in React JSX

If you're using JSX with Harmony, you could do this:

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

Here you are writing the value of src as an expression.


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} />

If you want to use the es6 template literals, you need braces around the tick marks as well:

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