React中如何将base64字符串设置为图片src并解决不显示报错问题

• 组件首次渲染时，captchaImg 的初始值为空字符串，此时拼接出来的src属性值为 data:image/png;base64,，这是不符合规范的Data URL，所以浏览器会直接抛出net::ERR_INVALID_URL错误。虽然useEffect会在组件挂载后更新state触发二次渲染得到正确的图片地址，但首次渲染的无效请求已经触发了报错。
• 额外排查点：如果是从服务端获取的base64字符串，要确认返回的内容没有多余的换行符、空格，或者本身没有自带data:image/png;base64,前缀，重复拼接前缀也会导致URL无效。

以下是几种可直接落地的修复方案：

1. 条件渲染img标签，等captchaImg有有效值之后再渲染图片，从根源避免首次渲染的无效请求：

import React, { useState, useEffect } from "react";

function Captcha(props) {
  const [captchaImg, setCaptchaImg] = useState("");
  useEffect(() => {
     setCaptchaImg("iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==");
  }, []);

  return (
   <div>
      {captchaImg && <img
       alt="captcha"
       id="dnt-captcha-img"
       src={`data:image/png;base64,${captchaImg}`}
      />}
   </div>

  );
}

export default Captcha;

2. 给src设置兜底占位值，避免首次渲染出现无效URL：
   可以把初始state设置为透明占位图的base64，也可以在拼接src时加三元判断：

src={captchaImg ? `data:image/png;base64,${captchaImg}` : '预设的占位图地址'}

3. 校验服务端返回的base64格式：如果服务端返回的base64本身已经携带了data:image/xxx;base64,前缀，直接赋值给src即可，不需要重复拼接前缀。

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