TypeScript React中拼接图片URL与变量报错问题排查

JSX的属性语法只支持两种传值方式：

• 静态值直接用双引号包裹，比如src="xxx.png"
• 动态JS表达式整体用单大括号包裹，比如src={变量/运算结果}

你当前的写法把一半URL写在双引号里当静态值，又在引号外面直接写+{apiKey}做拼接，这部分加号和大括号直接暴露在JSX标签的属性解析层，不属于合法的属性语法，TS/JSX解析器识别不了，就会抛出标识符错误。
你代码里key={"item-"+item+index}的写法之所以正常，就是因为整个字符串拼接的运算逻辑全放在大括号内部了，解析器会把大括号里的内容当普通JS执行，再把结果传给key属性。

两种合法写法选一种就行，推荐用模板字符串可读性更高：

1. ES6模板字符串拼接（推荐）
   把整个URL放在大括号内，变量用${变量名}插入：

<img 
  src={`https://maps.googleapis.com/maps/api/place/photo?maxwidth=400&photo_reference=Aap_uEA7vb0DDYVJWEaX3O-AtYp77AaswQKSGtDaimt3gt7QCNpdjp1BkdM6acJ96xTec3tsV_ZJNL_JP-lqsVxydG3nh739RE_hepOOL05tfJh2_ranjMadb3VoBYFvF0ma6S24qZ6QJUuV6sSRrhCskSBP5C1myCzsebztMfGvm7ij3gZT&key=${apiKey}`}
/>

2. 加号运算符拼接
   注意整个拼接表达式必须全部包裹在大括号内部，apiKey不需要额外套大括号：

<img 
  src={"https://maps.googleapis.com/maps/api/place/photo?maxwidth=400&photo_reference=Aap_uEA7vb0DDYVJWEaX3O-AtYp77AaswQKSGtDaimt3gt7QCNpdjp1BkdM6acJ96xTec3tsV_ZJNL_JP-lqsVxydG3nh739RE_hepOOL05tfJh2_ranjMadb3VoBYFvF0ma6S24qZ6QJUuV6sSRrhCskSBP5C1myCzsebztMfGvm7ij3gZT&key=" + apiKey}
/>

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