diff --git a/webapp/src/components/contentBlock.tsx b/webapp/src/components/contentBlock.tsx index 7620a7341..1c830ebaa 100644 --- a/webapp/src/components/contentBlock.tsx +++ b/webapp/src/components/contentBlock.tsx @@ -9,6 +9,7 @@ import {IContentBlock} from '../blocks/contentBlock' import {MutableDividerBlock} from '../blocks/dividerBlock' import {MutableTextBlock} from '../blocks/textBlock' import mutator from '../mutator' +import octoClient from '../octoClient' import {Utils} from '../utils' import IconButton from '../widgets/buttons/iconButton' import AddIcon from '../widgets/icons/add' @@ -33,7 +34,24 @@ type Props = { intl: IntlShape } -class ContentBlock extends React.PureComponent { +type State = { + imageDataUrl?: string +} + +class ContentBlock extends React.PureComponent { + state: State = {} + + componentDidMount() { + if (this.props.block.type === 'image' && !this.state.imageDataUrl) { + this.loadImage() + } + } + + private async loadImage() { + const imageDataUrl = await octoClient.fetchImage(this.props.block.fields.url) + this.setState({imageDataUrl}) + } + public render(): JSX.Element | null { const {intl, card, contents, block} = this.props @@ -160,9 +178,9 @@ class ContentBlock extends React.PureComponent { readonly={this.props.readonly} />} {block.type === 'divider' &&
} - {block.type === 'image' && + {block.type === 'image' && this.state.imageDataUrl && {block.title}}
diff --git a/webapp/src/octoClient.ts b/webapp/src/octoClient.ts index e71cbbd22..b2ff157f2 100644 --- a/webapp/src/octoClient.ts +++ b/webapp/src/octoClient.ts @@ -316,6 +316,17 @@ class OctoClient { return true } + + // Images + + async fetchImage(url: string): Promise { + const response = await fetch(url, {headers: this.headers()}) + if (response.status !== 200) { + return '' + } + const blob = await response.blob() + return URL.createObjectURL(blob) + } } function getReadToken(): string {