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

方案一：用content属性自定义Toast完整内容（推荐） #

Ionic的IonToast提供了content属性，支持传入任意JSX元素，可完全自定义Toast布局，这是官方支持的最灵活方式。你可以直接按需求排版头像、消息文本和操作按钮：

<IonToast
  isOpen={isOpen}
  position="top"
  duration={5000}
  onDidDismiss={() => setIsOpen(false)}
  content={
    <div style={{ display: 'flex', alignItems: 'center', gap: '12px', padding: '12px' }}>
      {/* 用户头像 */}
      <img 
        src={notification.actor.profilePicture} 
        alt="Profile" 
        style={{ width: '24px', height: '24px', borderRadius: '50%' }} 
      />
      {/* 消息文本 */}
      <span style={{ flex: 1 }}>
        {`${notification.actor.firstName} ${notification.actor.lastName} sent you a friend request.`}
      </span>
      {/* 操作按钮 */}
      <IonButton size="small" onClick={() => setIsOpen(false)}>
        接受
      </IonButton>
      <IonButton size="small" fill="clear" onClick={() => setIsOpen(false)}>
        拒绝
      </IonButton>
    </div>
  }
/>

这种方式不受默认Toast组件限制，可自由调整头像大小、间距和整体样式。

方案二：利用CSS定位头像到默认Toast左侧 #

如果想保留默认Toast样式，仅替换图标位置为头像，可通过绝对定位实现：

1. 给Toast添加自定义类名：

<IonToast
  isOpen={isOpen}
  message={`${notification.actor.firstName} ${notification.actor.lastName} sent you a friend request.`}
  position="top"
  duration={5000}
  onDidDismiss={() => setIsOpen(false)}
  className="toast-with-avatar"
  buttons={[{ text: '查看', handler: () => {} }]}
/>

2. 在全局CSS中添加定位样式：

.toast-with-avatar {
  position: relative;
  padding-left: 48px !important; /* 为头像预留空间 */
}

.toast-with-avatar::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-image: url('替换为用户头像URL');
  background-size: cover;
  background-position: center;
}

注意：该方法依赖Ionic Toast内部样式结构，后续版本更新可能需要调整CSS选择器或间距值。

方案三：将头像转为SVG字符串传入icon属性 #

如果一定要用buttons里的icon属性，可把头像封装成SVG元素，生成字符串后传入：

// 生成包含头像的SVG字符串
const avatarIcon = `
<svg width="24" height="24" viewBox="0 0 24 24">
  <circle cx="12" cy="12" r="12" fill="white"/>
  <image href="${notification.actor.profilePicture}" x="0" y="0" width="24" height="24" rx="12"/>
</svg>
`;

// 转为Data URL
const avatarIconUrl = `data:image/svg+xml;base64,${btoa(avatarIcon)}`;

// 在Toast中使用
<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: avatarIconUrl,
      handler: () => {}
    },
    { text: '查看', handler: () => {} }
  ]}
/>

该方法适合需保留默认按钮布局的场景，但要注意跨域图片的CORS配置问题。

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