325

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

10 Answers 10

509

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

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}`} />
2
50

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.

2
  • 1
    this is something that's hard to find. and for reusable containers this is a-must-know
    – holms
    Dec 23, 2016 at 16:49
  • 3
    Just so that people don't get confused with mentioning of Harmony, this is a part of ES6 standard, while answer is dated few months before it became a standard. Sep 10, 2018 at 22:52
18

Instead of adding variables and strings, you can use the ES6 template strings! Here is an example:

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

As for all other JavaScript components inside JSX, use template strings inside of curly braces. To "inject" a variable use a dollar sign followed by curly braces containing the variable you would like to inject. For example:

{`string ${variable} another string`}
8

Best practices are to add getter method for that :

getImageURI() {
  return "images/" + this.props.image;
}

<img className="image" src={this.getImageURI()} />

Then , if you have more logic later on, you can maintain the code smoothly.

2

For People, looking for answers w.r.t to 'map' function and dynamic data, here is a working example.

<img src={"http://examole.com/randomview/images" + each_actor['logo']} />

This gives the URL as "http://examole.com/randomview/images/2/dp_pics/182328.jpg" (random example)

2

You can do like this

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

Note: In react you can put javascript expression inside curly bracket. We can use this property in this example.
Note: give one look to below example:

class LoginForm extends React.Component {

  constructor(props) {
    super(props);

    this.state = {i:1};
  }

  handleClick() {
    this.setState(prevState => ({i : prevState.i + 1}));

    console.log(this.state.j);  
  }


  render() {

    return (
      <div>
        <p onClick={this.handleClick.bind(this)}>Click to change image</p>
        <img src={'images/back'+ this.state.i+'.jpg'}/>
      </div>
      );

  }
}
1

Here is the Best Option for Dynamic className or Props , just do some concatenation like we do in Javascript.

     className={
        "badge " +
        (this.props.value ? "badge-primary " : "badge-danger ") +
        " m-4"
      }
1
  • I'd recommend uses classnames package for building dynamic classNames Jun 10, 2019 at 23:44
1

you can use

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

or

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

or

  render() {
         let imageUrl = this.props.image ? "images/"+this.props.image : 'some placeholder url image';
    return (
       <div>
          <img className="image" src={imageUrl} />
       </div>
    )
  }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.