First attempt to fix #3993. Show error message
if image is not able to be displayed by browser.
This commit is contained in:
parent
f7747a73b6
commit
b786ba82ae
1 changed files with 18 additions and 3 deletions
|
@ -1,5 +1,7 @@
|
|||
// @flow
|
||||
import React from 'react';
|
||||
import Card from 'component/common/card';
|
||||
import ErrorText from 'component/common/error-text';
|
||||
|
||||
type Props = {
|
||||
source: string,
|
||||
|
@ -7,10 +9,23 @@ type Props = {
|
|||
|
||||
function ImageViewer(props: Props) {
|
||||
const { source } = props;
|
||||
const [loadingError, setLoadingError] = React.useState(false);
|
||||
|
||||
return (
|
||||
<div className="file-render__viewer">
|
||||
<img src={source} />
|
||||
</div>
|
||||
<React.Fragment>
|
||||
{loadingError && (
|
||||
<Card
|
||||
title={__('Error Displaying Image')}
|
||||
defaultExpand
|
||||
actions={<ErrorText>There was an error displaying the image. You may still download it.</ErrorText>}
|
||||
/>
|
||||
)}
|
||||
{!loadingError && (
|
||||
<div className="file-render__viewer">
|
||||
<img src={source} onError={() => setLoadingError(true)} />
|
||||
</div>
|
||||
)}
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue