Merge pull request #1829 from dan1d/issue-1808

Differentiate between failed thumbnail url and emtpy url images.
This commit is contained in:
Shawn K 2018-07-30 18:03:20 -05:00 committed by GitHub
commit 944f74a287
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 10 additions and 4 deletions

View file

@ -18,6 +18,7 @@ type Props = {
type State = { type State = {
thumbnailError: boolean, thumbnailError: boolean,
thumbnailErrorImage: string,
}; };
class SelectThumbnail extends React.PureComponent<Props, State> { class SelectThumbnail extends React.PureComponent<Props, State> {
@ -26,6 +27,7 @@ class SelectThumbnail extends React.PureComponent<Props, State> {
this.state = { this.state = {
thumbnailError: false, thumbnailError: false,
thumbnailErrorImage: 'no-thumbnail.png',
}; };
(this: any).handleThumbnailChange = this.handleThumbnailChange.bind(this); (this: any).handleThumbnailChange = this.handleThumbnailChange.bind(this);
@ -36,7 +38,7 @@ class SelectThumbnail extends React.PureComponent<Props, State> {
const newThumbnail = e.target.value.replace(' ', ''); const newThumbnail = e.target.value.replace(' ', '');
updatePublishForm({ thumbnail: newThumbnail }); updatePublishForm({ thumbnail: newThumbnail });
this.setState({ thumbnailError: false }); this.setState({ thumbnailError: false, thumbnailErrorImage: 'no-thumbnail.png' });
} }
render() { render() {
@ -49,9 +51,9 @@ class SelectThumbnail extends React.PureComponent<Props, State> {
thumbnailPath, thumbnailPath,
resetThumbnailStatus, resetThumbnailStatus,
} = this.props; } = this.props;
const { thumbnailError } = this.state; const { thumbnailError, thumbnailErrorImage } = this.state;
const thumbnailSrc = const thumbnailSrc =
!thumbnail || thumbnailError ? Native.imagePath('no-thumbnail.png') : thumbnail; !thumbnail || thumbnailError ? Native.imagePath(thumbnailErrorImage) : thumbnail;
return ( return (
<div className="card__content"> <div className="card__content">
@ -62,7 +64,11 @@ class SelectThumbnail extends React.PureComponent<Props, State> {
className="column__item thumbnail-preview" className="column__item thumbnail-preview"
alt={__('Thumbnail Preview')} alt={__('Thumbnail Preview')}
onError={() => { onError={() => {
this.setState({ thumbnailError: true }); this.setState({
thumbnailError: true,
thumbnailErrorImage:
thumbnail && thumbnail.length > 0 ? 'broken.png' : 'no-thumbnail.png',
});
}} }}
/> />
<div className="column__item"> <div className="column__item">

BIN
static/img/broken.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.5 KiB