Question

我正在尝试显示来自base64字符串的图像，但它一直像这样显示：

我尝试打印img并得到如下信息：data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/2wBDAQMDAwQDBAgEBAgQCwkLEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBD/wAARCABQAFADASIAAhEBAxEB/8QAGAABAQEBAQAAAAAAAAAAAAAAAgEAAwn/xAAtEAEAAgEEAQMCBgEFAAAAAAABAhEAAxIhMSJBUWETcSOBkaHB8UIyYrHR4f/EABcBAQEBAQAAAAAAAAAAAAAAAAABAgP/xAAWEQEBAQAAAAAAAAAAAAAAAAAAARH/2gAMAwEAAhEDEQA/APS3aymVIvvFHaRnxTdrglUXdfESr6zRgmrI3dexd8D/ADm3Ios9S5xYUpEs/fIbGc7h5HF9fnmPCfAPq21l1NstS4yFS6vAMtmnzLeP+1vHE8yciiVU/lhWwCHdcvpzi37nZOHIKpx9sAar5ty2h3fr7ZoeMa7Rv5PtmgQk2+XveWZTScPdcvx9sCyYBKSrOy4y65zOnppGUVG6CHAZb8baU9O+PlzRJTLNM2F2rX6YBjP6lkplSX4xyTfKTIkP7cB/GcxfpR43+/xlj9OPOoRCJZZ64BjC2U5abE49PT3yyhVSixRb+xl3T1NPcUL7Pp7VmjHj3964+2A0qLKx9+c5z1HuJ5dvz/1j0yNJVN+N+uHU05zZRaDi6wMxW4w5kyeD4/vJJ21Pyiy4pO6xq9RiLJW3CwkR3NsvV7r8sBacSMpXpqJZG+35yVInc1L9PQyMpHM5FcdS5yqxSt1LY2YEuI/TIdt8+mJjp3a1XtznFJMqNzu5eM7BEk+MgOzAEYkYy1Bk7rYj8f3iL3MJRGu8haShOXiXR9/6zee9eKegbXj/AMwLpyhLcacfIL+2bUL8t6jEt6zVGI7u5cV085JJZDU1PIKoOH2wLFg1F84p11ziYw0iU9+5CxurM5xhImwra14o3+edI6W/dbQFHHWDHLdAjvjJuXO0D+c6BYTDl+MIMEfFKqspFIKy4sO67wshRfC+YlV74T6vjvVu/G8MYMEJWDW639z7Z0dzDh3Upu649HCJpyYSYoSnT2YY7tu6KBFb45LxR+r9OyUav7uF1Dc2Wtf4cP74Gaj+JublwK2/plSM/CLJl1KKfveWljyRK5sOTBKtGokNxLm15MLI6DLSdrQnq4fSnU5ly4oxIm6D5RwkjVhxKRT3WFSxHo9gLXLGEmLcg5HkxMosDydz0jnNksiM5XQ8rz/xgKWo6YpI8pO5iXXsZKlYy3Eke3o9OMUg3hNGJzydrhZG7fqlPXDVmGT2SYx4jL8qvI6TFCqTnjnMxtNrI7RvrNBnIjFUV/1V3ggz1l06kF9bapxyrVNsZBcS4vfGHU04QmEhSuZHf65QiRPpzjzdX2ffDTSiml+A82CJliSsiAQ/yF7wRjv1N0NSYVSHvjnKypWxrtwNES/pjs9DqsG2VECbd31eUJMFnu+C6xQu4xjMjuu75wP/2Q=

我尝试通过执行<img src={this.state.img} />仅显示它是错误的吗？感谢您的帮助！

编辑：我还更新了此帖子，以包含如何生成base64代码。本质上，我上传图像并使用https://www.npmjs.com/package/react-image-crop裁剪该图像。然后，我要显示裁剪的图像，这就是发生问题的地方

<div>
     <input type="file" onChange={this.onSelectFile} />
</div>

onSelectFile = e => {
    if (e.target.files && e.target.files.length > 0) {
      const reader = new FileReader();
      reader.addEventListener(
        "load",
        () =>
          this.setState({
            src: reader.result,
            openCropper: true
          }),
        false
      );
      reader.readAsDataURL(e.target.files[0]);
    }
  };


function getCroppedImg(image, pixelCrop, fileName) {

  const canvas = document.createElement('canvas');
  canvas.width = pixelCrop.width;
  canvas.height = pixelCrop.height;
  const ctx = canvas.getContext('2d');

  ctx.drawImage(
    image,
    pixelCrop.x,
    pixelCrop.y,
    pixelCrop.width,
    pixelCrop.height,
    0,
    0,
    pixelCrop.width,
    pixelCrop.height
  );

  // As Base64 string
  const base64Image = canvas.toDataURL('image/jpeg');
  return base64Image;

Answer 1

我相信您在base64 URL的末尾缺少等号。

data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/2wBDAQMDAwQDBAgEBAgQCwkLEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBD/wAARCABQAFADASIAAhEBAxEB/8QAGAABAQEBAQAAAAAAAAAAAAAAAgEAAwn/xAAtEAEAAgEEAQMCBgEFAAAAAAABAhEAAxIhMSJBUWETcSOBkaHB8UIyYrHR4f/EABcBAQEBAQAAAAAAAAAAAAAAAAABAgP/xAAWEQEBAQAAAAAAAAAAAAAAAAAAARH/2gAMAwEAAhEDEQA/APS3aymVIvvFHaRnxTdrglUXdfESr6zRgmrI3dexd8D/ADm3Ios9S5xYUpEs/fIbGc7h5HF9fnmPCfAPq21l1NstS4yFS6vAMtmnzLeP+1vHE8yciiVU/lhWwCHdcvpzi37nZOHIKpx9sAar5ty2h3fr7ZoeMa7Rv5PtmgQk2+XveWZTScPdcvx9sCyYBKSrOy4y65zOnppGUVG6CHAZb8baU9O+PlzRJTLNM2F2rX6YBjP6lkplSX4xyTfKTIkP7cB/GcxfpR43+/xlj9OPOoRCJZZ64BjC2U5abE49PT3yyhVSixRb+xl3T1NPcUL7Pp7VmjHj3964+2A0qLKx9+c5z1HuJ5dvz/1j0yNJVN+N+uHU05zZRaDi6wMxW4w5kyeD4/vJJ21Pyiy4pO6xq9RiLJW3CwkR3NsvV7r8sBacSMpXpqJZG+35yVInc1L9PQyMpHM5FcdS5yqxSt1LY2YEuI/TIdt8+mJjp3a1XtznFJMqNzu5eM7BEk+MgOzAEYkYy1Bk7rYj8f3iL3MJRGu8haShOXiXR9/6zee9eKegbXj/AMwLpyhLcacfIL+2bUL8t6jEt6zVGI7u5cV085JJZDU1PIKoOH2wLFg1F84p11ziYw0iU9+5CxurM5xhImwra14o3+edI6W/dbQFHHWDHLdAjvjJuXO0D+c6BYTDl+MIMEfFKqspFIKy4sO67wshRfC+YlV74T6vjvVu/G8MYMEJWDW639z7Z0dzDh3Upu649HCJpyYSYoSnT2YY7tu6KBFb45LxR+r9OyUav7uF1Dc2Wtf4cP74Gaj+JublwK2/plSM/CLJl1KKfveWljyRK5sOTBKtGokNxLm15MLI6DLSdrQnq4fSnU5ly4oxIm6D5RwkjVhxKRT3WFSxHo9gLXLGEmLcg5HkxMosDydz0jnNksiM5XQ8rz/xgKWo6YpI8pO5iXXsZKlYy3Eke3o9OMUg3hNGJzydrhZG7fqlPXDVmGT2SYx4jL8qvI6TFCqTnjnMxtNrI7RvrNBnIjFUV/1V3ggz1l06kF9bapxyrVNsZBcS4vfGHU04QmEhSuZHf65QiRPpzjzdX2ffDTSiml+A82CJliSsiAQ/yF7wRjv1N0NSYVSHvjnKypWxrtwNES/pjs9DqsG2VECbd31eUJMFnu+C6xQu4xjMjuu75wP/2Q==

Answer 2

问题可能是由于调用onSelectFile的上下文所致。当前，您将onSelectFile定义为箭头函数。反过来，这意味着this.setState将在您的FileReader加载图像数据（然后尝试更新组件的状态）时未定义。

请考虑以下代码，概述可能的解决方案：

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
        src:''
    }
  }

  // Define as class method rather than arrow function
  onSelectFile(e) {

    if (e.target.files && e.target.files.length > 0) {
      const reader = new FileReader();
      reader.addEventListener(
        "load",
        () =>
          this.setState({
            src: reader.result,
            openCropper: true
          }),
        false
      );
      reader.readAsDataURL(e.target.files[0]);
    }
  }

  render() {
    return (
      <div>
     {/* invoke onSelectFile in this way to ensure calling context is 
         current component */}
     <input type="file" onChange={(e) => this.onSelectFile(e)} />
     <img src={this.state.src} />
      </div>
    )
  }
}

ReactDOM.render(<App />, document.querySelector("#app"))

对于有效的演示，please see this jsFiddle-希望这会有所帮助！

Base64字符串图像无法正确显示

2 个答案: