How to display image tag in reactjs using template literal?-CodePudding

const value = weather.weather
        console.log('icon', value?.[0].icon)
        const url = `http://openweathermap.org/img/wn/${value?.[0].icon}@2x.png`
        
        return(
            <div>
                <div> temperature {weather?.main?.temp} Celcius</div>
                <div>
                <img src="url" alt="icon" width="120" height="100"/>
                </div>
                <p>wind {weather?.wind?.speed} m/s</p>
            </div>
            
        )
    }

Why I cannot display the image behind my "url" in this case? any suggestions?

CodePudding user response：

You have to access the url varaible like:
<img src={url} alt="icon" width="120" height="100"/>
Instead of "url", beacause it parse it literally like a string named "url",
and not get the value of the variable which is the relevant url you concated.