[Help Wanted] React Image Crop does not render.

[fzs1994]

I'm able to get image base64 in source of image cropper, but <ReactCrop> does not render.

let LogoCropper = null;
		if (this.state.logoImage) {
			LogoCropper = (
				<ReactCrop
					src={this.state.logoImage}
					crop={crop}
					onImageLoaded={this.onImageLoaded}
					onComplete={this.onCropComplete}
					onChange={this.onCropChange}
				/>
			);
		}

[sekoyo]

Hi did you include the CSS?

…

On Mon, 12 Aug 2019, 07:02 Faizan Saiyed, ***@***.***> wrote: [image: Screenshot (2)] <https://user-images.githubusercontent.com/10684213/62847576-99ce7f80-bcf4-11e9-87ab-f27e7d73f430.png> I'm able to get image base64 in source of image cropper, but <ReactCrop> does not render. let LogoCropper = null; if (this.state.logoImage) { LogoCropper = ( <ReactCrop src={this.state.logoImage} crop={crop} onImageLoaded={this.onImageLoaded} onComplete={this.onCropComplete} onChange={this.onCropChange} /> ); } — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#288>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAFZT6SEO4D32LSZRC4Z4D3QED4F5ANCNFSM4IK6DUMQ> .

[fzs1994]

Yes, I did

import ReactCrop from 'react-image-crop';
import 'react-image-crop/dist/ReactCrop.css';

[sekoyo]

It seems likely that your base64 data is invalid in that case, it is just an image tag and if your base64 data is correct then an image would show - so long as the container has at least some width set. Try pasting your base64 data into an <img> in a blank JSFiddle for example. If it doesn't show anything it's probably invalid.

[fzs1994]

I figured out, there was some issue with .ReactCrop__image styles in ReactCrop.css

Overriding max-height: none resolves the issue in my case

[sekoyo]

Interesting, is the crop inside an element that has display: grid by any chance?

…

On Tue, 13 Aug 2019, 08:52 Faizan Saiyed, ***@***.***> wrote: I figured out, there was some issue with .ReactCrop__image styles in ReactCrop.css [image: image] <https://user-images.githubusercontent.com/10684213/62924211-43813f80-bdcd-11e9-9d08-b00d85b7efa5.png> *Overriding max-height: none resolves the issue in my case* — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#288>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAFZT6UR3E6EHLICINNP6EDQEJR43ANCNFSM4IK6DUMQ> .

[sekoyo]

Should be fixed in 8.3.0 (removed max-height property)