React-native-render-html: Some image sizes not working

Created on 24 Oct 2017 · 7Comments · Source: meliorence/react-native-render-html

First of all, thank you for this repo, it is by far the best html renderer for React Native that I've tried.

The problem I'm having is that not all images are being sized correctly. I'm using the Dimensions.get('window').width trick but some images are rendered at full size and spill off the screen. I'm not sure exactly what the cause is but it seems to only apply to images who have their sizes specified in this format: sizes: "(max-width: 100px) 100vw, 603px"

I'm building a rss feed reader using the Feedly API so I've been noting which feeds give me problems with their images and they all have that sizing format in common. Some examples of the feeds that do this:

https://postsecret.com/
https://waitbutwhy.com/
http://www.poorlydrawnlines.com/

Here's a screencap of the debug output when the screen is rendered:
imagerenderdebugoutput

And the html I'm rendering look like this:

<p>
  <img sizes="(max-width: 700px) 100vw, 700px" src="http://www.poorlydrawnlines.com/wp-content/uploads/2017/10/poltergeist.png"
    alt="" width="700" srcset="http://www.poorlydrawnlines.com/wp-content/uploads/2017/10/poltergeist.png 700w, http://www.poorlydrawnlines.com/wp-content/uploads/2017/10/poltergeist-300x264.png 300w"
    class="wp-image-6468" height="615">
</p>

I'm sure I didn't do a great job explaining all this but I'm happy to provide any additional information needed to figure this out.

enhancement question

Source

chadmorrow

All 7 comments

I don't know if this is a related issue but all youtube embedded videos also spill off the screen.

Oh and I'm currently using 3.5.0-rc.3 of react-native-render-html

chadmorrow on 24 Oct 2017

Hi @chadmorrow, thanks for the kind words !

As documented in the README :

Please note that if you set width AND height through any mean of styling, imagesMaxWidth will be ignored.

In your example with the ghost comic, you do have height and width, so imagesMaxWidth isn't doing anything.

It resizes properly as long as I remove them

I'm not sure what's the best in your situation, because I guess you can't make sure these attributes aren't in your HTML. Well, you could use alterChildren to remove them but it feels like hacking. I really think height and width should override anything if they're supplied.
Please tell me if you have some ideas to resolve this.

Regarding your other issue, at the moment, there is no behavior regarding <iframe> to make sure it's not rendered off-screen, it depends on height and width attributes, or defaults to 200x200, which is kinda terrible I guess.

It would be nice to add a fallback depending on the width of the screen instead of a static value.

Exilz on 26 Oct 2017

😕1

Oh, the iframe issue might just be a misunderstanding on my part. I thought I had read on a different issue that had been closed that there was support added for iframes similar to images but now I don't see where I would have read that.

Thanks for looking into the issue with the images. I can't quite figure out why the height and width attributes are always set to 1 on some of these problem images and it doesn't seem to matter what I try to override them to, they always render full size. I'll keep working on it though and let you know if I figure anything out. Thank you again for taking the time to look into this!

chadmorrow on 26 Oct 2017

When I request the image of your example it's actually a 1x1 image, so your issue must come from your feed.

I'll think about improving the iframe renderer and keep you posted.

Exilz on 26 Oct 2017

I improved the iframe renderer in 3.5.0. It's not perfect, but at least, iframes cannot be rendered with a width superior to your device's viewport. That's a little better, but for advanced usage you'll need to write your own renderer.

Feel free to re open another issue if your image rendering problem actually comes from this plugin.

Exilz on 27 Oct 2017

👍1

The image size issue is still a problem for me as well. It seems like this did not get resolved

Stevevelt on 23 Oct 2019

@Stevevelt
Try this

<HTML html={textToRender} {...htmlConfig} ignoredStyles={['height', 'width']} imagesMaxWidth={Dimensions.get('window').width} style={{ width: '100%' }} />

Try adding ignoredStyles