jsdf/react-native-htmlview

Image tags have default images on iOS13

Elderkly opened this issue · 5 comments

image

This issue did not happen on IOS12.
How can i remove this default image?

    renderNode(node, index, siblings, parent, defaultRenderer) {
        if (node.name == 'img') {
            let { src, height, width } = node.attribs;
            const imageHeight = height || 100;
            const windowWidth = Dimensions.get('window').width - 30
            width = width > windowWidth ? windowWidth : width
            return (
                <Image
                    key={index}
                    style={{ width: getPX(width), height: imageHeight * PixelRatio.get(),borderRadius:3}}
                    source={{ uri: src }}
                />
            );
        } else if (node.name === 'p') {
            // console.log(node)
            if (node.children && node.children[0]) {
                return <Text style={{fontSize:15,color:"#0D121B",lineHeight:24}}>{node.children[0].data}</Text>
            }
        }
    }

    render() {
      return (
        <HtmlView
               value={this.state.ApiData.content}
                stylesheet={styles}
                renderNode={this.renderNode}
         />
      )
    }

Hey,

I just faced the exact same issue and I fixed it with css hack ^^

renderNode(node, index, siblings, parent, defaultRenderer) {
    if (node.name === 'img') {
      return (
        <View style={{ marginBottom: size(20), height: size(250) }}>
          <Image
            key={index}
            source={{ uri: node.attribs.src }}
            style={{
              position: 'absolute',
              height: size(250),
              width: Statics.DEVICE_WIDTH - size(40),
            }}
          />
        </View>
      );
    }
  }
aevzp commented

It doesn't helping =(

i have the same problem...

image

This issue did not happen on IOS12. How can i remove this default image?

    renderNode(node, index, siblings, parent, defaultRenderer) {
        if (node.name == 'img') {
            let { src, height, width } = node.attribs;
            const imageHeight = height || 100;
            const windowWidth = Dimensions.get('window').width - 30
            width = width > windowWidth ? windowWidth : width
            return (
                <Image
                    key={index}
                    style={{ width: getPX(width), height: imageHeight * PixelRatio.get(),borderRadius:3}}
                    source={{ uri: src }}
                />
            );
        } else if (node.name === 'p') {
            // console.log(node)
            if (node.children && node.children[0]) {
                return <Text style={{fontSize:15,color:"#0D121B",lineHeight:24}}>{node.children[0].data}</Text>
            }
        }
    }

    render() {
      return (
        <HtmlView
               value={this.state.ApiData.content}
                stylesheet={styles}
                renderNode={this.renderNode}
         />
      )
    }

你好 请问ios上图片有默认背景的问题解决了吗?

Hey,

I just faced the exact same issue and I fixed it with css hack ^^

renderNode(node, index, siblings, parent, defaultRenderer) {
    if (node.name === 'img') {
      return (
        <View style={{ marginBottom: size(20), height: size(250) }}>
          <Image
            key={index}
            source={{ uri: node.attribs.src }}
            style={{
              position: 'absolute',
              height: size(250),
              width: Statics.DEVICE_WIDTH - size(40),
            }}
          />
        </View>
      );
    }
  }

This method cannot be solved...