diff options
| author | crupest <crupest@outlook.com> | 2020-08-04 18:14:41 +0800 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2020-08-04 18:14:41 +0800 |
| commit | 6177e4fc237aedf62b7d6011f19f04d98c26da39 (patch) | |
| tree | fe97f2ec93a81a83811f548707ac9825328c7b7e /Timeline/ClientApp/src/app/common/BlobImage.tsx | |
| parent | f84fc5e653d6d29add893b6d2573d04c91fd1d40 (diff) | |
| parent | 09b7e1f737659d0ee75e5ac2fd5c1decf8fa15a6 (diff) | |
| download | timeline-6177e4fc237aedf62b7d6011f19f04d98c26da39.tar.gz timeline-6177e4fc237aedf62b7d6011f19f04d98c26da39.tar.bz2 timeline-6177e4fc237aedf62b7d6011f19f04d98c26da39.zip | |
Merge pull request #132 from crupest/refactor
Refactor a lot of things.
Diffstat (limited to 'Timeline/ClientApp/src/app/common/BlobImage.tsx')
| -rw-r--r-- | Timeline/ClientApp/src/app/common/BlobImage.tsx | 27 |
1 files changed, 27 insertions, 0 deletions
diff --git a/Timeline/ClientApp/src/app/common/BlobImage.tsx b/Timeline/ClientApp/src/app/common/BlobImage.tsx new file mode 100644 index 00000000..91497705 --- /dev/null +++ b/Timeline/ClientApp/src/app/common/BlobImage.tsx @@ -0,0 +1,27 @@ +import React from 'react';
+
+import { ExcludeKey } from '../utilities/type';
+
+const BlobImage: React.FC<
+ ExcludeKey<React.ImgHTMLAttributes<HTMLImageElement>, 'src'> & { blob?: Blob }
+> = (props) => {
+ const { blob, ...otherProps } = props;
+
+ const [url, setUrl] = React.useState<string | undefined>(undefined);
+
+ React.useEffect(() => {
+ if (blob != null) {
+ const url = URL.createObjectURL(blob);
+ setUrl(url);
+ return () => {
+ URL.revokeObjectURL(url);
+ };
+ } else {
+ setUrl(undefined);
+ }
+ }, [blob]);
+
+ return <img {...otherProps} src={url} />;
+};
+
+export default BlobImage;
|