clear `src` attribute on recycled `<img>` nodes

Here’s a codepen with the problem: when the src attribute of an image is changed, the old picture will keep showing while the new picture is loading. This behavior persists even if the image is removed from the DOM. When combined with Preact’s node-caching, this can get crazy, with old pictures showing up again in unrelated places.

Clearing the image with .removeAttribute('src') should solve the issue. I’ll plan on putting together a pull request here shorty.

[joscul]

Had the same problem. Solved it by adding the key={src} to my image component and it worked. Got the idea here: https://stackoverflow.com/questions/50690956/react-img-not-immediately-changing-when-src-changes-how-can-i-fix-this

[jackmoore]

I’ve also been running into this problem with old images showing while new images load, which is not a trivial amount of time. The old images may be visible for seconds.

I tried using .removeAttribute('src') on componentWillUnmount, which did work to start each image on a clean slate but there is some sort of race condition there because sometimes the new image would end up without an src attribute. It was unworkable.

I settled on creating this component as a replacement for <img> elements, which seemed to provide both a clean slate and resolve the .removeAttribute('src') race condition:

export default class extends React.Component {
	state = {src: null};

	componentDidMount() {
		this.setState({src: this.props.src});
	}

	componentWillReceiveProps(nextProps) {
		if (nextProps.src !== this.props.src) {
			this.setState({src: nextProps.src});
		}
	}

	render() {
		return <img {...this.props} src={this.state.src}/>;
	}
}