react-native-htmlview

react-native-htmlview copied to clipboard

Does react-native-htmlview support <img> tags with images local to the project?

I can't seem to get it to work with any path, even when they work as expected when passing them to a RN <Image> element.

So this works:

<Image source={require('../Images/logo.png')}>

but this doesn't:

 const htmlContent = `<img src="../Images/logo.png">`;
 <HTMLView value={htmlContent} />

I'm getting

Failed to get size for image: ../Images/logo.png

@pekkanikolaus at the moment it's assumed that the resource is remote: the { uri: ... } object is passed to the underlying Image component. That should be a fairly easy fix, so if you'd like to PR it feel free! Otherwise it'll join the 'nice to have' feature list :wink:

@richchurcher Thanks! Still new to all this, but will give it a try!

OK! So I gave this a try, but there's a couple of snags.

I added support for local URIs by checking whether a local attribute in the <img> tag is set. If it is, I will do a require(props.attribs.src), rather than using the src string itself as the image source. So far, so good.

One snag is that there's no built-in way to determine the dimensions of a local image bundled with the project - Image.getSize() will just balk - so one would either have to use a 3rd party module to do that, or explicitly specify the image's dimensions in the <img> tag. The latter is what I settled for for the moment.

The other, more grave problem is that for require(props.attribs.src) to work, the resource path must be declared statically in the code! Ugh!

There's one exception, but it's not very helpful: resources that are declared through XCode asset catalogs or in the Android drawable folder can apparently be require()d dynamically.

Having to manually require() every bundled resource you're going to mention in the HTML, or having to add each of them to one or two resource lists, definitely defeats the purpose of reducing effort. My idea was to have a folder tree filled with HTML files and images, and using this module to display them in the RN app as they show up on the accompanying web site without having to do any cross-platform adjustments. Using JSX files (and maybe using/building a converter for the back and forth to HTML) may be the simpler approach after all.

If anyone sees a solution to those snags that I've overlooked, let me know!

Hrm, ok. Will have a wee think about this one :)

I used a similar path:

file:///data/user/0/com.sugoireader/files/gSmWCJF.png

But the image is too blurry