Reactjs 使用Base64字符串显示图像会导致响应时间缓慢

我有一个JSON

messages

，其中包含一条消息和用户id。最初我存储了所有用户，请参见下面的localstorage中的JSON

现在我迭代所有

消息

，并调用

消息

组件。这将显示带有图像的消息。在

消息

组件中，我让正确的用户显示图像。问题是，我只将此图像作为

Base64字符串

（请参阅JSON）。如果我现在有20条消息，那么它仍然可以顺利运行，但是一旦添加了越来越多的消息，整个事情就开始挂起，并且需要相对较长的时间，直到用户可以输入输入或显示最新的消息。我现在的问题是，是否有一个选项可以在没有速度延迟的情况下显示图像

用户Json在localstorage中的外观

[
   {
      "id":1,
      "username":"Max",
      "image":"data:image/png;base64,iVBORw0KGgoAAo..."
   },
   {
      "id":2,
      "username":"Power",
      "image":"data:image/png;base64,iVBORw0JasdnHJD..."
   },
]

消息端

function MessageSide(props) {

  return (
      <div class="col flex-fill background--chat">
        <div className="content__body">
          <div className="item"  style={loaded? {} : {display: 'none'}}>
            {messages.map((message) => {
              return (
                <div>
                  <Message
                    message={message.body} 
                    id={message.id}
                    timestamp={message.timestamp}
                    chatid={message.chatid}
                  />
                </div>
              );
            })}
          </div>
          <div ref={messagesEndRef}/>
        </div>
      </div>
  );
}
export default MessageSide;

功能消息端（道具）{
返回(
{messages.map（（message）=>{
返回(
);
})}
);
}
导出默认消息端；

信息

export const Message = ({ message, timestamp, image, id, chatid, name }) => {
  
    var users = localStorage.getItem(`userList_${chatid}`);
    users = JSON.parse(users);

  const getImageOfUser = () => {
    //console.log(id)
    //console.log(chatid)

    
    image = users.find((user) => user.id === id).image;
    //console.log(certainUser)
    //console.log(image)
  };
 
  getImageOfUser(); // that is the problem

  return (
    <div className={checkMessageStyle} style={{ animationDelay: `0.1s` }}>
      <div className="chat__item__content">
        <span>{name}</span>
        <div className="chat__msg">{message}</div>
        <div className="chat__meta">
          <span>{timestamp}</span>
        </div>
      </div>
      <Avatar image={image} />
    </div>
  );
};

export const Message=（{Message，timestamp，image，id，chatid，name}）=>{
var users=localStorage.getItem（`userList_${chatid}`）；
users=JSON.parse（users）；
常量getImageOfUser=（）=>{
//控制台日志（id）
//console.log（chatid）
image=users.find（（user）=>user.id==id）.image；
//console.log（certainUser）
//console.log（图像）
};
getImageOfUser（）；//这就是问题所在
返回(
{name}
{message}
{时间戳}
);
};

化身

import React, { Component } from "react";

export default class Avatar extends Component {

  render() {
    return (
      <div className="avatar">
        <div className="avatar-img">
          <img src={this.props.image} alt="#" />
        </div>
      </div>
    );
  }
}

import React，{Component}来自“React”；
导出默认类Avatar扩展组件{
render（）{
返回(
);
}
}