How to parse an image url in React?

Question

I am new here, so apologies if I am asking trivial question, but could not find answer anywhere. I need to parse my link to display image. Image is in format e.g. p8983.png

So I build this link which is correct, not sure how to render/parse it with ---> see line 8

const targetImage = `public/assets/p${playerData.player.id}.png`;

This don't work - see line 19 <div><img src="{targetImage}"></img></div>

Second issue I have is I do not know how to do math calculations on values pulled from JSON - see lines 17, 18 (all is displayed as a string) e.g.

<div>Passes per minute: {playerData.stats[4].value} + {playerData.stats[8].value} / {playerData.stats[7].value}</div>

Rendering and image and values after math calculations

Shouldn't it be <img src={targetImage}>? Otherwise you're creating a string that literally is "{targetImage}" (no variable interpolation). — Aurora0001
– Aurora0001, Commented Nov 27, 2016 at 13:39
Thank you @Dave Moten, it worked, you are right it was so obvious. — maciejk77
– maciejk77, Commented Nov 27, 2016 at 15:03
@Dave Moten, pleast post this as an answer and I can mark you as correct, so you can ean your well deserved points — maciejk77
– maciejk77, Commented Nov 27, 2016 at 15:41
Ah, you should thank @Aurora0001. I just fixed a bit of spelling! — Dave Moten
– Dave Moten, Commented Nov 27, 2016 at 20:37
@maciejk77 posted as an answer (assuming you did want me to do that!). Glad it helped you! — Aurora0001
– Aurora0001, Commented Nov 27, 2016 at 20:42

Aurora0001 · Accepted Answer · 2016-11-27 20:41:21Z

2

There's a subtle difference between your code and what you want: <img src="{targetImage}"> sets your image's source to literally be the string "{targetImage}", which is obviously invalid. The correct format for React props is <img src={targetImage}>, which should produce the desired output.

Make sure you read JSX in Depth from Facebook to learn the differences so you can avoid mistakes like this and get a better understanding of JSX and React; it should help you understand what you did wrong!

answered Nov 27, 2016 at 20:41

Aurora0001

13.6k5 gold badges52 silver badges53 bronze badges

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

Collectives™ on Stack Overflow

How to parse an image url in React?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related