如何在 Ionic Toast 通知左侧添加用户头像？

Question

我正在努力在我的 Ionic React 应用程序中实现 toast 通知，并且我想在 toast 的左侧包含用户的头像图像。我们的想法是让头像位于图标通常所在的位置。

到目前为止，我已经成功添加了一个简单的图标，但我想用用户的个人资料图片替换它。我尝试将图像直接添加到 icon 属性，但它似乎只接受图标名称或 SVG 文件路径的字符串。这是我迄今为止所掌握的内容的片段：

<IonToast
  isOpen={isOpen}
  message={`${notification.actor.firstName} ${notification.actor.lastName} sent you a friend request.`}
  position="top"
  duration={5000}
  onDidDismiss={() => setIsOpen(false)}
  buttons={[
    {
      side: 'start',
      icon: <img src={notification.actor.profilePicture} alt="Profile" style={{ width: '24px', height: '24px', borderRadius: '50%' }} />,
      handler: () => {}
    }
  ]}
/>

但是，这似乎没有按预期工作，因为图标属性不接受 JSX 元素。

在Ionic目前的能力范围内有没有办法实现这一点？或者也许有任何自定义方法可以在图标的位置渲染图像？任何建议或解决方法将不胜感激！

提前致谢！

Answer 1

您可以在消息中使用自定义 HTML 来显示任何 html 元素，包括图像：

例如：

JS：

let customHTML = `
<div class="d-flex">
   <div>
      <img src="YourAvatar.png">
   </div>
   <div>
      ${notification.actor.firstName} ${notification.actor.lastName} sent you a friend request.
   </div>
</div>
`

HTML：

<IonToast
  isOpen={isOpen}
  message={customHTML} // add your HTML here
  position="top"
  duration={5000}
  onDidDismiss={() => setIsOpen(false)}
  buttons={[
    {
      side: 'start',
      icon: <img src={notification.actor.profilePicture} alt="Profile" style={{ width: '24px', height: '24px', borderRadius: '50%' }} />,
      handler: () => {}
    }
  ]}
/>

但是您需要在 ionic 配置中启用

innerHTMLTemplatesEnabled

才能生效。

更多文档：Ionic Documentaion