Couldn't load large image and how do i scale it?

[dzpt]

My HTML text has 1500x1500 image, and it couldn't be load properly the result is the blur images.

??!

Then, how do i scale and style image? I've tried

img: {
    	width: 100,
		height: 100,
		marginLeft: -10
  	},

But didn't work.

[bas-ie]

@Tom29 I'm having some trouble reproducing your problem. I just dumped a 2560x1600 image into an HTMLView and it displayed in proportion, with no blur. You might need to post some more code, and perhaps the image you're testing with.

[dzpt]

@richchurcher here is my simple code:

<HTMLView value={'<img src="https://static01.nyt.com/images/2017/06/01/world/01LondonUber4/01LondonUber4-superJumbo-v2.jpg">'} />

And the result is the blur image, it's blur randomly (80%) , refresh few times if you don't see the blur image at the first time.

[bas-ie]

Unfortunately I still cannot reproduce. Your image looks fine to me, testing with RN 0.45 and react-native-htmlview 0.10 on Android, even after many reloads.

The fact that it is an intermittent problem is suspicious of a networking issue or even a low memory state. I note that https://github.com/facebook/react-native/issues/10470 describes someone having difficulty loading moderate-sized images... maybe something similar?

To rule out the obvious stuff, I would: upgrade React Native (if you can, that's not always practical) and use the latest version of react-native-htmlview. Letting us know what platform, versions etc you're using might also be helpful but short of a repo to help reproduce the problem, I'm not sure what else to suggest.

[dzpt]

@richchurcher I tested on simulator (iOS) and real device (iPhone 7, and 7 plus release mode) react-native-cli: 2.0.1 react-native: 0.44.0 react-native-htmlview latest version.

Both has the same result, blurred images. Have you tested in on iOS?

[bas-ie]

Nope, I can't currently test iOS builds (hopefully after this week though). There is some image size and width manipulation that happens under the hood, so it's possible something is going wrong there but I think the way forward would be to publish a minimal repo that reproduces your problem so others can check it. The process might also reveal to you what's happening, or give us some more clues.

If a minimal sample repo doesn't exhibit the problem, then something else in your project may be interacting with/causing the issue. If it does, then it'll enable us to test it and isolate the issue.

[dzpt]

@richchurcher you should test in iOS. Because there is no need more code to investigate. Here is my completed file, there's nothing else to conflict the code:

import React from 'react'
import { View } from 'react-native'
import HTMLView from 'react-native-htmlview'

class MainTab extends React.Component 
{
    render() {
		return (
			<View style={{flex:1}}>
            	<HTMLView value={'<img src="https://static01.nyt.com/images/2017/06/01/world/01LondonUber4/01LondonUber4-superJumbo-v2.jpg" />'} />
			</View>
        )
    }
}
module.exports = MainTab

There's no need to create repo, if you haven't tested it with iOS. I think the issue comes from the resizing mechanism.

[RobertWSaunders]

Can confirm, this is an issue on iOS, I am having a similar issue. Image appears to be blurry. How do you specify height and width?

[bas-ie]

Thanks @RobertWSaunders that's useful! Width and height can be passed the old fashioned way, as image attributes I believe (https://github.com/jsdf/react-native-htmlview/blob/master/htmlToElement.js#L18-L24). Try setting an explicit value there and see what happens:

<img src="" width="100" height="100">

I don't think I can explain why the failure is intermittent though :confused:

[RobertWSaunders]

Thanks @richchurcher, that seems to work! It looks like a strange issue, in some scenarios it starts out blurry and then loads in properly, it does occur with smaller image files as well.

[bas-ie]

Good. Maybe the docs should make reference to setting width and height explicitly. @Tom29 can you try this and see if it resolves the issue for you?

[dzpt]

@richchurcher Yes, it works with specified width and height. But this is hard to use, how do i know size of each one to set width / height for them

[bas-ie]

I think the real solution is to allow styles to be set for images, but that'll take a minor-ish PR to sort out.

[dzpt]

@richchurcher have you done it yet?

[bas-ie]

Nope. PR welcome though! :wink:

[djimenezsi2]

I found a solution for me in this issue: https://github.com/jsdf/react-native-htmlview/issues/271

replacing images with components so we can handle widths and heights.

[Aung-Myint-Thein]

how did you replace the image with components?

[djimenezsi2]

how did you replace the image with components?

@Aung-Myint-Thein I just follow the code that you can see also in #271

_renderNode(node, index, siblings, parent, defaultRenderer) {
	if (node.name === 'img') {
            const data = node.attribs;
		return (
                <Image
                      key={index}
                      source={{uri: data.src}}
                      resizeMode="contain"
                      style={{ height: 500, width: 500}}
                    />
                );

		}
    }