image getting blur issue #141

appongit · 2018-05-03T07:20:14Z

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']} />

The text was updated successfully, but these errors were encountered:

guregu · 2018-05-05T11:15:03Z

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

Edit: applied the diff to this fork: https://github.com/guregu/react-native-render-html

Exilz · 2018-05-07T08:03:17Z

Thanks for your input @guregu, this makes a lot of sense.

I'll take a look into this later and maybe try to trigger a re-render instead of waiting for the image to be loaded to render it. I don't think the UX would be very good if the height of the content changes while the user is reading it.

appongit · 2018-05-07T14:31:19Z

Thanks @guregu it worked perfect,

i have also done with little hack, i did edit HTMLimage.js and gave to static height,

but now i am happy with your code

See issue meliorence#141

mikaoelitiana · 2019-05-14T15:37:10Z

Here is the patch content you can use with https://www.npmjs.com/package/patch-package

diff --git a/node_modules/react-native-render-html/src/HTMLImage.js b/node_modules/react-native-render-html/src/HTMLImage.js
index 5406cb2..78ab662 100644
--- a/node_modules/react-native-render-html/src/HTMLImage.js
+++ b/node_modules/react-native-render-html/src/HTMLImage.js
@@ -7,7 +7,8 @@ export default class HTMLImage extends PureComponent {
         super(props);
         this.state = {
             width: props.imagesInitialDimensions.width,
-            height: props.imagesInitialDimensions.height
+            height: props.imagesInitialDimensions.height,
+            indeterminate: (!props.style || !props.style.width || !props.style.height)
         };
     }
 
@@ -77,7 +78,8 @@ export default class HTMLImage extends PureComponent {
         if (styleWidth && styleHeight) {
             return this.setState({
                 width: typeof styleWidth === 'string' && styleWidth.search('%') !== -1 ? styleWidth : parseInt(styleWidth, 10),
-                height: typeof styleHeight === 'string' && styleHeight.search('%') !== -1 ? styleHeight : parseInt(styleHeight, 10)
+                height: typeof styleHeight === 'string' && styleHeight.search('%') !== -1 ? styleHeight : parseInt(styleHeight, 10),
+                indeterminate: false
             });
         }
         // Fetch image dimensions only if they aren't supplied or if with or height is missing
@@ -89,7 +91,7 @@ export default class HTMLImage extends PureComponent {
                 }
                 const optimalWidth = imagesMaxWidth <= originalWidth ? imagesMaxWidth : originalWidth;
                 const optimalHeight = (optimalWidth * originalHeight) / originalWidth;
-                this.setState({ width: optimalWidth, height: optimalHeight, error: false });
+                this.setState({ width: optimalWidth, height: optimalHeight, indeterminate: false, error: false });
             },
             () => {
                 this.setState({ error: true });
@@ -115,9 +117,21 @@ export default class HTMLImage extends PureComponent {
         );
     }
 
+    get placeholderImage () {
+        return (
+            <View style={{width: this.props.imagesInitialDimensions.width, height: this.props.imagesInitialDimensions.height}} />
+        );
+    }
+
     render () {
         const { source, style, passProps } = this.props;
 
-        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);
     }
 }

chiennv97 · 2019-11-23T07:23:43Z

Try to edit file HTMLImage.js
validImage (source, style, props = {}) {
return (
<Image
source={source}
style={[style, { width: Dimensions.get('window').width, height: this.state.height, resizeMode: 'cover' }]}
{...props}
/>
);
}

Before:

After:

JaeWangL · 2020-03-23T14:25:06Z

Dimensions.get('window').width

This really work well!!

bear1030 · 2020-07-16T02:37:19Z

@JaeWangL
You don't need to update their original package code.
You can set the imagesInitialDimensions props like this.

<HTML 
  html={itemId.description}
  imagesMaxWidth={Dimensions.get('window').width}
  imagesInitialDimensions={
    {
      width: Dimensions.get('window').width
    }
  }
  staticContentMaxWidth={Dimensions.get('window'}
 />

jsamr · 2020-07-22T10:25:46Z

@guregu Thanks you for your proposition! You don't mind if I cherry-pick your patch and integrate it to the next 5.0 release? You'll be credited of course, since I'll be using the git cherry-pick feature.

jsamr · 2020-07-22T10:58:47Z

@guregu It is my understanding that your solution had a small bug, because state.indeterminate was defined as "style prop has both width and height attributes", whilst ignoring width and height props. See my patch on top of your:

diff --git a/src/HTMLImage.js b/src/HTMLImage.js
index 558c7c3..ca1fec8 100644
--- a/src/HTMLImage.js
+++ b/src/HTMLImage.js
@@ -5,10 +5,11 @@ import PropTypes from 'prop-types';
 export default class HTMLImage extends PureComponent {
     constructor (props) {
         super(props);
+        const { styleWidth, styleHeight } = this.getDimensionsFromStyle(props.style, props.height, props.width);
         this.state = {
             width: props.imagesInitialDimensions.width,
             height: props.imagesInitialDimensions.height,
-            indeterminate: (!props.style || !props.style.width || !props.style.height)
+            indeterminate: !(styleWidth && styleHeight)
         };
     }

guregu · 2020-07-23T11:33:43Z

@jsamr Hello, feel free to use my code however you’d like.
I’m not sure why I ignored the props, might have just been an oversight or perhaps there was some issue with the codebase I was integrating it with. Either way if the changes make it more correct then please go ahead and apply them :)
It’s been a while so I forgot 😅

jsamr · 2020-07-23T11:35:30Z

@guregu Awesome! Thank you.

BREAKING: imagesMaxWidth prop is discontinued in favor of contentWidth and computeImagesMaxWidth. See RFC001 for an exhaustive description. This patch offers a rewrite of the HTMLImage component to get a close match with RFC001, “a deterministic approach to images scaling”. The only part of this RFC which is unsupported is the unitConverter behavior, which is planned for a later major release. In addition to the capabilities defined in the RFC, this patch provides the new property enableExperimentalPercentWidth. It allows percent width for <img> tags, computed relatively to contentWidth. This patch also fixes #141, #172 and provides the features offered in PR #242 and #315. fixes #141 fixes #172 closes #315 closes #242

BREAKING: imagesMaxWidth prop is discontinued in favor of contentWidth and computeImagesMaxWidth. See RFC001 for an exhaustive description. This patch offers a rewrite of the HTMLImage component to get a close match with RFC001, “a deterministic approach to images scaling”. The only part of this RFC which is unsupported is the unitConverter behavior, which is planned for a later major release. In addition to the capabilities defined in the RFC, this patch provides the following features and behaviors: - new property enableExperimentalPercentWidth. It allows percent width for <img> tags, computed relatively to contentWidth. - take margins into account when scaling down images; - support for overriding image styles, including resizeMode; - support for minWidth, minHeight, maxWidth, maxHeight styles. This patch also fixes #141, #172 and provides the features offered in PR #242 and #315. fixes #141 fixes #172 closes #315 closes #242

BREAKING: imagesMaxWidth prop is discontinued in favor of contentWidth and computeImagesMaxWidth. See RFC001 for an exhaustive description. This patch offers a rewrite of the HTMLImage component to get a close match with RFC001, “a deterministic approach to images scaling”. The only part of this RFC which is unsupported is the unitConverter behavior, which is planned for a later major release. In addition to the capabilities defined in the RFC, this patch provides the following features and behaviors: - new property enableExperimentalPercentWidth. It allows percent width for <img> tags, computed relatively to contentWidth. - take margins into account when scaling down images; - support for overriding image styles, including resizeMode; - support for minWidth, minHeight, maxWidth, maxHeight styles. This patch also fixes #141, #172 and provides the features offered in PR #242 and #315. OPTIMIZATIONS: The imageBoxDimensions are computed when required. In addition, requirements are also recomputed when necessary, preventing expensive operations from happening too often. Also, because we need to flatten the style prop to infer requirements, this flatten value is now cached and re-evaluated when appropriate. Finally, styles have been moved to a stylesheet when that is possible, to avoid commiting updates to the native side. Note that these performance optimizations are made possible by the high coverage rate of the HTMLImage component. fixes #141 fixes #172 closes #315 closes #242

BREAKING: imagesMaxWidth prop is discontinued in favor of contentWidth and computeImagesMaxWidth. See RFC001 for an exhaustive description. This patch offers a rewrite of the HTMLImage component to get a close match with RFC001, “a deterministic approach to images scaling”. The only part of this RFC which is unsupported is the unitConverter behavior, which is planned for a later major release. In addition to the capabilities defined in the RFC, this patch provides the following features and behaviors: - new property enableExperimentalPercentWidth. It allows percent width for <img> tags, computed relatively to contentWidth. - take margins into account when scaling down images; - support for overriding image styles, including resizeMode; - support for minWidth, minHeight, maxWidth, maxHeight styles. This patch also fixes #141, #172 and provides the features offered in PR #242 and #315. OPTIMIZATIONS: The imageBoxDimensions are computed when required. In addition, requirements are also recomputed when necessary, preventing expensive operations from happening too often. Also, because we need to flatten the style prop to infer requirements, this flatten value is now cached and re-evaluated when appropriate. Finally, styles have been moved to a stylesheet when that is possible, to avoid commiting updates to the native side. Note that these performance optimizations are made possible by the high coverage rate of the HTMLImage component. fixes #141 fixes #172 updates #412 (could fix) closes #315 closes #242

Exilz added enhancement An enhancement is a change that is not a feature. is:help wanted We are welcoming PRs to address this. labels May 7, 2018

hzuhyb mentioned this issue Aug 15, 2018

Image is not clear in IOS #176

Closed

Exilz mentioned this issue Aug 22, 2018

HTML image is blurred ？ #177

Closed

courier-new added a commit to rivals-com/react-native-render-html that referenced this issue Nov 16, 2018

fix for blurry images when resizing

bab312b

See issue meliorence#141

jsamr added bug Crush'em all. bug:easyfix Easily fixed. bug:minor Low priority bug. and removed enhancement An enhancement is a change that is not a feature. is:help wanted We are welcoming PRs to address this. labels Jul 19, 2020

jsamr added the domain:scaling Related to embedded content scaling (images, iframes, ...) label Jul 22, 2020

jsamr added a commit that referenced this issue Jul 24, 2020

tests: provide regression against #141, blur images on iOS

60e9017

jsamr mentioned this issue Jul 24, 2020

A revamped scalable HTMLImage component #389

Merged

2 tasks

jsamr added a commit that referenced this issue Jul 24, 2020

tests: provide regression against #141, blur images on iOS

b98eec3

jsamr added a commit that referenced this issue Jul 24, 2020

tests: provide regression against #141, blur images on iOS

d89d365

jsamr added a commit that referenced this issue Jul 24, 2020

tests: provide regression against #141, blur images on iOS

c68ae87

jsamr added the is:waiting pr A pull request is awaiting reviews to solve the problem. label Jul 25, 2020

jsamr added a commit that referenced this issue Jul 27, 2020

tests: provide regression against #141, blur images on iOS

65e1cf5

jsamr added a commit that referenced this issue Jul 27, 2020

tests: provide regression against #141, blur images on iOS

4ed202b

jsamr added a commit that referenced this issue Sep 26, 2020

tests: provide regression against #141, blur images on iOS

fff7e04

jsamr closed this as completed in #389 Sep 26, 2020

jsamr added a commit that referenced this issue Sep 26, 2020

tests: provide regression against #141, blur images on iOS

675ebd6

jsamr mentioned this issue Dec 5, 2020

[5.x] 🚀 A new "Legacy" Major #442

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

image getting blur issue #141

image getting blur issue #141

appongit commented May 3, 2018

guregu commented May 5, 2018 •

edited

Loading

Exilz commented May 7, 2018

appongit commented May 7, 2018 •

edited

Loading

mikaoelitiana commented May 14, 2019

chiennv97 commented Nov 23, 2019

JaeWangL commented Mar 23, 2020

bear1030 commented Jul 16, 2020 •

edited

Loading

jsamr commented Jul 22, 2020

jsamr commented Jul 22, 2020

guregu commented Jul 23, 2020

jsamr commented Jul 23, 2020

image getting blur issue #141

image getting blur issue #141

Comments

appongit commented May 3, 2018

Is this a bug report or a feature request?

Have you read the guidelines regarding bug report?

Have you read the documentation in its entirety?

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

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

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

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

Environment

Steps to Reproduce

Expected Behavior

Actual Behavior

Reproducible Demo

guregu commented May 5, 2018 • edited Loading

Exilz commented May 7, 2018

appongit commented May 7, 2018 • edited Loading

mikaoelitiana commented May 14, 2019

chiennv97 commented Nov 23, 2019

JaeWangL commented Mar 23, 2020

bear1030 commented Jul 16, 2020 • edited Loading

jsamr commented Jul 22, 2020

jsamr commented Jul 22, 2020

guregu commented Jul 23, 2020

jsamr commented Jul 23, 2020

guregu commented May 5, 2018 •

edited

Loading

appongit commented May 7, 2018 •

edited

Loading

bear1030 commented Jul 16, 2020 •

edited

Loading