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（或 JSX）不支持属性值内的变量插值，但您可以将任何 JS 表达式放在大括号内作为整个属性值，所以这有效：

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

Answer 2

如果要使用 es6 模板文字，还需要在刻度线周围加上大括号：

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

Answer 3

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.

Answer 4

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

Answer 5

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.

Answer 6

For People, looking for answers wrt 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)

Answer 7

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>
      );

  }
}

Answer 8

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

Answer 9

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

Answer 10

你可以这样做

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