aboutsummaryrefslogblamecommitdiffstats
path: root/packages/website/ts/components/ui/image.tsx
blob: c4ff9353141d92d81356652e433e78b9a96e265d (plain) (tree)
1
2
3
4
5
6
7
8
9






                               
                             
                          
                            


















                                                                                                                  


                                                          
                                          
                                        








                                  
import * as _ from 'lodash';
import * as React from 'react';

export interface ImageProps {
    className?: string;
    src?: string;
    fallbackSrc?: string;
    height?: string | number;
    borderRadius?: string;
    width?: string | number;
}
interface ImageState {
    imageLoadFailed: boolean;
}
export class Image extends React.Component<ImageProps, ImageState> {
    constructor(props: ImageProps) {
        super(props);
        this.state = {
            imageLoadFailed: false,
        };
    }
    public render(): React.ReactNode {
        const src =
            this.state.imageLoadFailed || _.isUndefined(this.props.src) ? this.props.fallbackSrc : this.props.src;
        return (
            <img
                className={this.props.className}
                onError={this._onError.bind(this)}
                src={src}
                style={{
                    borderRadius: this.props.borderRadius,
                }}
                height={this.props.height}
                width={this.props.width}
            />
        );
    }
    private _onError(): void {
        this.setState({
            imageLoadFailed: true,
        });
    }
}