How can I pass parameters to URL?

Question

I'm working on geolocation api which gives me CountryCode. I want to pass this country code to another api displaying images.

<img src="http://www.geognos.com/api/en/countries/flag/{country_code}.png">

The image interpreted by browser is

http://www.geognos.com/api/en/countries/flag/%7Bcode%7D.png 

instead of

http://www.geognos.com/api/en/countries/flag/US.png

How can I fix this? What could be the possible problem?

Answer 1

Issue

You are providing/specifying a string literal.

Solution

Use template literal

<img src={`http://www.geognos.com/api/en/countries/flag/${country_code}.png`} />

 const country_code = "US"; console.log(`http://www.geognos.com/api/en/countries/flag/${country_code}.png`);