Accede a accesorios dentro de comillas en React JSX

En JSX, ¿cómo hace referencia a un valor propsdesde dentro de un valor de atributo citado?

Por ejemplo:

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

El resultado HTML resultante es:

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

React (o JSX) no admite la interpolación de variables dentro de un valor de atributo, pero puede colocar cualquier expresión JS dentro de llaves como todo el valor de atributo, por lo que esto funciona:

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

Si desea utilizar los literales de la plantilla es6, también necesita llaves alrededor de las marcas de graduación:

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

Si está utilizando JSX con Harmony, puede hacer esto:

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

Aquí estás escribiendo el valor de srccomo una expresión.

¡En lugar de agregar variables y cadenas, puede usar las cadenas de plantilla ES6! Aquí hay un ejemplo:

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

Como para todos los demás componentes de JavaScript dentro de JSX, use cadenas de plantilla dentro de llaves. Para "inyectar" una variable, use un signo de dólar seguido de llaves que contengan la variable que desea inyectar. Por ejemplo:

{`string ${variable} another string`}

Las mejores prácticas son agregar un método getter para eso:

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

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

Luego, si tiene más lógica más adelante, puede mantener el código sin problemas.

Para las personas que buscan respuestas wrt a la función 'mapear' y datos dinámicos, aquí hay un ejemplo de trabajo.

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

Esto proporciona la URL como " http://examole.com/randomview/images/2/dp_pics/182328.jpg " (ejemplo aleatorio)

Nota: en react puedes poner la expresión javascript dentro de un paréntesis. Podemos usar esta propiedad en este ejemplo.
Nota: mire el siguiente ejemplo:

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

  }
}

Aquí está la mejor opción para Dynamic ClassName o Props, solo haga una concatenación como lo hacemos en Javascript.

     className={
        "badge " +
        (this.props.value ? "badge-primary " : "badge-danger ") +
        " m-4"
      }

puedes usar

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

o

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

o

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