Displays images with incorrect aspect ratio: <p><img..../></p>

[AdwardNguyen]

I have a problem when I want render data from API by html resource Example data <p> demo data </p><img src='https:/abc.com/up/image1.jpg'.. /><p><img src='https:/abc.com/up/image2.jpg'.. /> </p>

Image 1: working fine Image 2: not working fine because inline paragraph tag. display with incorrect height item

Please help me solve this problem! Thank you!

[thirteenthEyes]

Source code(in htmlToElement.js Eighty-eighth lines):

if (node.name === 'img') { return <Img key={index} attribs={node.attribs} />; }

Change to:

if (node.children && node.children.length > 0 && node.children[0].name === 'img') { return <Img key={index} attribs={node.children[0].attribs} />; }

[nongh4704]

I hava the same issue in android.Have you solved it?

[djarrin]

I solved this issue from the backend by removing any p tags that surround images (here is the expression in PHP): preg_replace('/<p>\s*(<a .*>)?\s*(<img .* \/>)\s*(<\/a>)?\s*<\/p>/iU', '\1\2\3', $text);

[herel]

I have this problem !

<p class="xxxxxx"><img src="...."></p> => <Text><Image source="" /></Text>

It seems that the problem comes with the attributes of TEXT for example the line heigth margin or padding

resolve

I solved it by eliminating the

inside the image.

so react compile:

stringHtml.replace(/<\s*(p+).*?>/g,'<$1>').replace(/<(\/)?p>/g , '')

[Reidweb1]

Has anyone found a way to solve this without stripping out p tags?

[rochapablo]

Any update here?

[nongh4704]

I use another repository react-native-render-html

[atais]

@herel for some reason after applying your "patch" my styles:

const htmlStyles = StyleSheet.create({
  p: {
    fontSize: 15,
    color: textColor,
    textAlign: 'justify',
  },
});

do not work. What is your approach here?

[anthlasserre]

@AdwardNguyen Please can you share the exact html string you're trying to display.

I had aspect ratio problems too and I solved it like this:

if (node.name === 'img') {
    const img = node.attribs
    const aspectRatio = Number(img.width) / Number(img.height)
    return (
      <TouchableOpacity key={index} onPress={handleChangeImageZoomViewerState}>
        <Image
          source={{ uri: img.src }}
          style={[styles.img, { aspectRatio }]}
          resizeMode="cover"
        />
      </TouchableOpacity>
    )
  }