React组件中更新img的src并展示Base64图片问题求助

我来帮你梳理一下问题所在，以及如何快速修复：

核心错误：Base64转换方式不对 #

你当前用btoa(bufferedImage)处理二进制数据，但btoa()只能接收UTF-16字符串，而screenshot()返回的是Uint8Array（Node.js环境下是Buffer类型）的二进制图片数据。直接把这个二进制对象传给btoa()，它会先把对象转成字符串"[object Uint8Array]"，再对这个无关字符串做Base64编码——这显然不是图片的有效编码，所以图片无法渲染。

你看到的前20个字符其实是这个无效字符串的Base64片段，并非真实图片的编码内容。

正确的转换方法 #

因为你使用的screenshot-desktop是Node.js包（推测是在Electron或Node+React环境），可以直接用Buffer的原生方法完成转换：

function captureCurrentScreen() {
  screenshot().then((bufferedImage) => {
    // 直接对Buffer/Uint8Array调用toString('base64')得到图片的有效编码
    let base64Image = bufferedImage.toString('base64');
    setImage(base64Image);
  });
}

如果是纯浏览器环境下的Uint8Array，也可以用这个方式转换：

let base64Image = btoa(String.fromCharCode(...bufferedImage));

修复后的完整代码 #

const screenshot = require("screenshot-desktop");
function ScreenCapturer(props) {
  const [image, setImage] = useState("");
  
  function captureCurrentScreen() {
    screenshot()
      .then((bufferedImage) => {
        const base64Image = bufferedImage.toString('base64');
        setImage(base64Image);
      })
      .catch(err => {
        // 建议添加错误捕获，方便排查截图环节的问题
        console.error('截图失败:', err);
      });
  }

  return (
    <div>
      <img 
        className="image-holder" 
        alt="桌面截图" 
        src={image ? `data:image/jpeg;base64,${image}` : ''}
      />
      <h3>Image Capturer</h3>
      {image && <h4>Base64Image : {image.substring(1, 20)}</h4>}
      <button onClick={captureCurrentScreen} >
        Capture
      </button>
    </div>
  );
}

额外优化说明 #

1. 空值处理：给img的src和Base64预览做了空值判断，避免初始状态下出现无效的data:image URI；
2. 错误捕获：添加catch()分支，能及时发现截图过程中的异常；
3. 渲染逻辑确认：你的组件确实会在image state更新后重新渲染，问题完全出在无效的Base64编码上，而非渲染机制。

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