ReactJS rendering image from array

Question

I am trying to render image from array by placing its name in middle of <img> link.

At this time I have ran out of links that could help me...

I tried everything that came to my mind. Everything displays as it should except image...!

this is array:

cars: [
        {
          'carname': '2013 Toyota GT86', 
          'owner': 'Ryan',
          'desc': 'Aero Paket, BC Coilover, 3sdm 0.01 black matte, Invidia N1 Catback, Valenti taillights, camouflage vinyls, Vortech supercharger incl. oil cooler - 325hp daily driver',
          'image': 'toyota'
        }]

Render section:

render() {
    const cars = this.state.cars.map((car, i) => {
      return (
        <div key={i}>
          <div className="col-md-12 cBusiness">
            <h2>
              { car.carname }
            </h2>
              <p>Owner: { car.owner }</p>

              <p>{ car.desc }</p>

              <p>

                <img src={"pages/upload/{car.image}.jpg"} />

              </p>

          </div>
        </div>
      );
    });

structure:

Eni Arinde · Accepted Answer · 2016-03-13 16:35:14Z

2

Do something like this:

 <img src={`pages/upload/${car.image}.jpg`} />

answered Mar 13, 2016 at 16:35

Eni Arinde

5655 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

dannyjolie · Accepted Answer · 2016-03-13 16:39:07Z

1

Try using template literals:

or old skool for all the IE folks out there:

<img src={"pages/upload/" + car.image + ".jpg"} />

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

answered Mar 13, 2016 at 16:39

dannyjolie

11.4k3 gold badges35 silver badges28 bronze badges

Collectives™ on Stack Overflow

ReactJS rendering image from array

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related