Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

image getting blur issue

See original GitHub issue

Is this a bug report or a feature request?

bug report

Have you read the guidelines regarding bug report?

yes

Have you read the documentation in its entirety?

yes

Have you made sure that your issue hasn’t already been reported/solved?

yes

Is the bug specific to iOS or Android? Or can it be reproduced on both platforms?

Unknown - only able to test on IOS (11.3)

Is the bug reproductible in a production environment (not a debug one)?

Yes

Have you been able to reproduce the bug in the provided example?

I have not tried the demo

Environment

IOS (11.3)

Steps to Reproduce

(Write your steps here:)

Create a string containing HTML Markup, with an image tag whose src points to a url which is resolved into the images.

Expected Behavior

images should in good result as i upload in ckeditor.  should not be blur

Actual Behavior

Image getting blur when i have nested images

Reproducible Demo

i dont have a demo but i have a code


 const htmlContent = `
  <iframe allow="encrypted-media" allowfullscreen="" frameborder="0" gesture="media" height="163" src="https://www.youtube.com/embed/MST_cBdgqic"></iframe>
  <div style="width:100%; height:100%;margin-top:10px; "><img border="0" src="https://storage.googleapis.com/appon/uploadedMedia/54441524224615/54441524224615_up_1524471931.jpg" style="width:100%;" title="" /></div>
  <div style="width:100%; height:100%; "><img border="0" src="https://storage.googleapis.com/appon/uploadedMedia/54441524224615/54441524224615_up_1524471931.jpg" style="width:100%;" title="" /></div>

`;
<HTML style={{ marginTop: 15,}} html={itemId.description} imagesMaxWidth={Dimensions.get('window').width} staticContentMaxWidth={Dimensions.get('window'} ignoredStyles={['height','width']} />

Issue Analytics

State:
Created 5 years ago
Comments:11 (1 by maintainers)

Top GitHub Comments

18reactions

guregucommented, May 5, 2018

Hello, I had the same issue (only tested on iOS 10 on iPhone 6S). I spent a lot of time aimlessly debugging and I think I figured it out. The problem seems to be something like this:

Dimensions are unknown so the image gets rendered with props.imagesInitialDimensions tiny dimensions (100x100 by default?).
This is a total guess, but React caches the tiny image instead of the original one?
After the real dimensions are known via Image.getSize, the image gets stretched.

In other words, if we avoid rendering the image until we know the actual size to render it, it doesn’t get blurred. The following patch (diff for HTMLImage.js) fixes the issue:

10c10,11
<             height: props.imagesInitialDimensions.height
---
>             height: props.imagesInitialDimensions.height,
>             indeterminate: (!props.style || !props.style.width || !props.style.height)
80c81,82
<                 height: typeof styleHeight === 'string' && styleHeight.search('%') !== -1 ? styleHeight : parseInt(styleHeight, 10)
---
>                 height: typeof styleHeight === 'string' && styleHeight.search('%') !== -1 ? styleHeight : parseInt(styleHeight, 10),
>                 indeterminate: false
92c94
<                 this.setState({ width: optimalWidth, height: optimalHeight, error: false });
---
>                 this.setState({ width: optimalWidth, height: optimalHeight, indeterminate: false, error: false });
117a120,125
>     get placeholderImage () {
>         return (
>             <View style={{width: this.props.imagesInitialDimensions.width, height: this.props.imagesInitialDimensions.height}} />
>         );
>     }
> 
120,121c128,134
< 
<         return !this.state.error ? this.validImage(source, style, passProps) : this.errorImage;
---
>         if (this.state.error) {
>             return this.errorImage;
>         } 
>         if (this.state.indeterminate) {
>             return this.placeholderImage;
>         }
>         return this.validImage(source, style, passProps);

I’m not sure if this is a React Native bug or an issue with this library. I’m a React Native noob so I’m not really sure what I’m doing. Shall I submit a PR?

BTW here’s a screenshot of the bug in action, the upper image is given fixed dimensions via style props and the bottom one has its dimensions automatically determined, they are the same size (800x600 real pixels) and imagesMaxWidth is set to 360. After applying this diff to HTMLImage.js this bug no longer occurs