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

Question

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

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, 0,
uri => {
resolve(uri);
},
'base64'
);
});
render() {
return <img src={this.resizeFile(rec.blob)} alt="recumbent" />
}
}
export default Recumbent;

Answer 1

您可以这样做：

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,
300,
"JPEG",
100,
0,
(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道具的状态。