React 不显示我调整大小的图片为什么？

问题描述

我的应用启动时没有错误消息，但我不知道为什么我的图片没有显示。

import React from 'react';
import rec from '../images/rec.jpg';
import Resizer from 'react-image-file-resizer';

class Recumbent extends React.Component {

    resizefile = (file) => new Promise(resolve => {
            Resizer.imageFileResizer(file,300,200,'JPEG',100,uri => {
              resolve(uri);
            },'base64'
            );
        });

    render() {
        return <img src={this.resizefile(rec.blob)} alt="recumbent" />
    }
}

export default Recumbent;

解决方法

你可以这样做：

import React from 'react';
import rec from "./picture.jpg";
import Resizer from "react-image-file-resizer";

const resizeFile = async (file) => {
  const image = await fetch(rec);
  const imageBlob = await image.blob();

  return new Promise((resolve) => {
    Resizer.imageFileResizer(
      imageBlob,300,"JPEG",100,(uri) => {
        resolve(uri);
      },"base64"
    );
  });
};

const App = () => {
  const [uri,setUri] = React.useState(null);

  React.useEffect(() => {
    async function uriAfterResize(file) {
      const image = await resizeFile(file);
      setUri(image);
    }
    uriAfterResize(rec);
  },[]);

  return <img src={uri ? uri : ""} alt="recumbent" />;
};

export default App;

您之前使用的方法没有考虑到您的 resizeFile 函数返回 Promise 的事实。这意味着检索 base64 图像是一个异步过程。

我的示例方法等到 promise 解决了我们想要的 uri 之后，然后我们更新一些有条件地传递给图像的 src 属性的状态。