neworbit / load-image-react Goto Github PK

As I understand it, blueimp-load-image simply renders an image on a canvas, but does not include a clickable link. This package is a way of using that package in React, but renders the image inside a clickable link to the image. Is that correct? Is there a reason for the two being different in this aspect? Thanks in advance.

This exception is happening inside image.js and I'm wondering if it's due to the fact that my <Image> element is conditionally-rendered? The image does end up loading properly, but I do see this error in the console.

image.js:257 Uncaught (in promise) TypeError: Cannot read property 'appendChild' of null
    at Image.<anonymous> (image.js:257)
    at step (image.js:151)
    at Object.next (image.js:81)
    at fulfilled (image.js:33) 

Hi @Jameskmonger , I've look at code and got few suggestions.
Please take a look at them. Don't know if contributes are welcome here so I would rather ask than making PR with those changes.

If you don't like them just close the issue.

1. Why componentDidUpdate instead of shouldComponentUpdate ?

    public async componentDidUpdate(prevProps: ImageProps) {
        if (this.props.src === prevProps.src) {
            return;
        }

        await this.renderImage();
    }

2. Wouldn't it be better to create ref inside constructor ? React.createRef() Right now each render creates new arrow function with ref, it's not a ideal for performance.
   The thing you used here is callback ref it's designed especially to pass it to inner components but here is vanilla DOM component not custom JSX component.

    public render() {
        return <a ref={el => this.container = el} href={this.props.src} className="loaded-image-container" />;
    }

3. If you really want to get best performance while loop on lastChild is faster. ;)

        while (this.container.firstChild) {
            this.container.removeChild(this.container.firstChild);
        }

I am having trouble figuring out how to display an image with a responsive size. I display images using the bootstrap grid system from react-bootstrap, and I can't figure out a way to have the image size scale with its parent container. The image canvas always has a fixed size, so when the browser is resized, the image either overflows its parent, or does not fill the entire space of its parent.

I have attempted to accomplish responsive width using refs by reading the width of the parent into the state (and updating the state when the window resizes), and setting the maxWidth of Image to the state variable. However this doesn't work.

Do you have an suggestions as to how I could accomplish this?