如何使用模板文字在 reactjs 中显示图像标签？

Question

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

为什么在这种情况下我无法显示“url”后面的图像？有什么建议吗？

Answer 1

您必须像这样访问 url 变量：

<img src={url} alt="icon" width="120" height="100"/>

而不是“url”，因为它按字面意思解析它就像一个名为“url”的字符串，而不是获取与你相关的 url 变量的值串联。

如何使用模板文字在 reactjs 中显示图像标签？

How to display image tag in reactjs using template literal?

reactjs

template-literals