React导入图片变量无法解析为字符串，图片无法渲染求助

嘿，我一眼就看到问题出在哪啦！你代码里的img标签写法有个小错误，导致logo变量没有被正确解析。

问题根源 #

你现在的img标签是这么写的：

<img src="{logo}" alt="logo" />

这里的"{logo}"是被双引号包裹的，JSX会把它当成普通字符串来处理，而不是去解析里面的logo变量。所以浏览器实际上是在请求路径为"{logo}"的图片，自然显示不出来啦。

解决方案 #

只需要去掉src属性的双引号，直接用花括号包裹变量就行，正确写法是：

<img src={logo} alt="logo" />

原理说明 #

在JSX语法里，如果你想插入JavaScript表达式（比如变量、函数返回值等），必须用{}来包裹，而且不能把{}放在引号里面——一旦加了引号，整个内容就会被视为字符串字面量，不会执行任何解析操作。

你已经通过import logo from '../../images/logo.jpg'正确导入了图片，logo变量本身就是正确的路径字符串，只要去掉多余的引号，JSX就会自动把变量解析成对应的路径，图片就能正常显示啦！

内容的提问来源于stack exchange，提问作者MatejG