Javascript 将头像（用户配置文件照片）添加到语义UI React'；s下降

作为一个辅助项目，我编写了一个小应用程序，对于主题和布局，我使用React Bootsrap。现在我正在尝试学习语义UI React&我不知道如何将用户配置文件照片添加到下拉列表中（最初的想法来自）

这是在我的应用程序使用反应引导

React引导代码：

以{user.displayName}身份登录
等待注销（）}>
退出

语义用户界面代码（我目前掌握的）：

以{user.displayName}身份登录
等待注销（）}>
退出

提前感谢您，祝您一切顺利。

从“React”导入React
import React from 'react'
import { Dropdown } from 'semantic-ui-react'

const friendOptions = [
  {
    key: 'Jenny Hess',
    text: 'Jenny Hess',
    value: 'Jenny Hess',
    image: { avatar: true, src: 'https://react.semantic-ui.com/images/avatar/small/jenny.jpg' },
  },
  {
    key: 'Elliot Fu',
    text: 'Elliot Fu',
    value: 'Elliot Fu',
    image: { avatar: true, src: 'https://react.semantic-ui.com/images/avatar/small/elliot.jpg' },
  },
  {
    key: 'Stevie Feliciano',
    text: 'Stevie Feliciano',
    value: 'Stevie Feliciano',
    image: { avatar: true, src: 'https://react.semantic-ui.com/images/avatar/small/stevie.jpg' },
  },
  {
    key: 'Christian',
    text: 'Christian',
    value: 'Christian',
    image: { avatar: true, src: 'https://react.semantic-ui.com/images/avatar/small/christian.jpg' },
  },
]

const DropdownExampleInline = () => (
  <span>
    Show me posts by{' '}
    <Dropdown
      inline
      options={friendOptions}
      defaultValue={friendOptions[0].value}
    />
  </span>
)

export default DropdownExampleInline

从“语义ui反应”导入{Dropdown}
常量选项=[
{
钥匙：“詹妮·赫斯”，
短信：“詹妮·赫斯”，
值：“Jenny Hess”，
图像：{avatar:true，src:'https://react.semantic-ui.com/images/avatar/small/jenny.jpg' },
},
{
关键词：“傅艾略特”，
课文：“傅艾略特”，
价值观：“傅艾略特”，
图像：{avatar:true，src:'https://react.semantic-ui.com/images/avatar/small/elliot.jpg' },
},
{
关键：“斯蒂夫·费利西亚诺”，
文字：“史蒂维·费利西亚诺”，
价值观：“史蒂维·费利西亚诺”，
图像：{avatar:true，src:'https://react.semantic-ui.com/images/avatar/small/stevie.jpg' },
},
{
关键：“基督徒”，
文本：“基督徒”，
价值观：“基督徒”，
图像：{avatar:true，src:'https://react.semantic-ui.com/images/avatar/small/christian.jpg' },
},
]
常量DropdownExampleInline=（）=>(
通过{'}向我显示帖子
)
导出默认下拉列表ExampleInline

您可以将组件传递给下拉文本属性。
将图像作为组件传递到“文本”道具

const DropdownExampleDropdown = () => (
  <Dropdown 
      text={<span><Image avatar src={'https://react.semantic-ui.com/logo.png'} /></span>}
      options={optionsList}
   />
)

export default DropdownExampleDropdown

const-DropdownExampleDropdown=（）=>(
)
导出默认下拉列表Example下拉列表

这与Alex Court建议的原理相同，只是不会引发预期的文本错误

在以下网站上找到它：

从“React”导入React
从“语义ui反应”导入{下拉列表，图像}
导出常量下拉菜单=（）=>(
常数触发器=；
常量选项=[
{
键：“用户”，
正文：(
以{user.displayName}
),
残疾人:对,，
},
{
键：“设置”，
文本：“设置”，
图标：“设置”，
},
{
键：“注销”，
文本：“注销”，
图标：“注销备用”，
},
];
返回(
)
}

谢谢你的回答。非常感谢。我在semantic ui的网站上看到了这一点，但我仍然不明白这对我来说会起什么作用，因为我没有预先编码avatar src，我从那里的google帐户中提取它。我不需要有人选择，我需要登录的人的avatar作为下拉按钮或是可点击的方面此时将触发下拉菜单。