JSX动态图片链接语法问题：从数据库状态数组加载图片

嘿，我明白你卡在JSX里动态拼接图片链接的地方了——这是React新手常踩的小坑，我来帮你捋清楚！

你之前的写法不符合JSX语法规则：在JSX中，属性值要么是静态字符串（用单/双引号包裹），要么是动态表达式（用大括号{}包裹整个表达式），不能把静态部分和动态拆分写。

正确的写法示例 #

你需要把静态URL前缀和动态后缀用字符串拼接的方式整合到一个表达式里，推荐用ES6模板字符串（更直观）：

<img 
  src={`http://media.rr.randomexample.com/wbma/media/${picArr.thumbnails.w160}`} 
  alt={picArr.title} 
/>

如果习惯传统字符串拼接，也可以这么写：

<img 
  src={'http://media.rr.randomexample.com/wbma/media/' + picArr.thumbnails.w160} 
  alt={picArr.title} 
/>

结合数组map遍历的完整场景 #

既然你是用map遍历状态数组渲染缩略图，记得给每个元素加上唯一的key属性（避免React警告），完整代码如下：

// 假设你的状态数组叫mediaList
{mediaList.map((picArr, index) => (
  <img 
    key={index} // 若picArr有唯一id，用id做key更优
    src={`http://media.rr.randomexample.com/wbma/media/${picArr.thumbnails.w160}`} 
    alt={picArr.title} 
    className="thumbnail" // 可按需加样式类
  />
))}

核心逻辑就是：把整个动态URL作为一个完整的表达式放进src属性的大括号里，这样React就能正确解析并渲染动态链接了。

内容的提问来源于stack exchange，提问作者H. Juho