Question

当我显示来自原始html的图像时，我遇到了问题。我有一张图片，一张图片可以完整显示，另一张图片不能完整显示。这是我给的输出。

第一张图像中的

不能完全显示，第二张图像可以完整显示。如何使第一张图像能像第二张图像一样显示？在这里，我使用库react-native-render-html。这是我的幸福

import React, { Component } from 'react';
import { View, Text, StyleSheet, ScrollView, Dimensions } from 'react-native';
import WebView from 'react-native-webview'
import {Container, Content, Header, Footer, Button} from 'native-base'
const API_URL = "https://api.bintangpelajar.com/api"
const API_TEST = "http://unnamed48.ccug.gunadarma.ac.id:9091/api"
import HTMLView from 'react-native-htmlview'
import HTML from 'react-native-render-html';

const htmlContent = `
    <h1>This HTML snippet is now rendered with native components !</h1>
    <h2>Enjoy a webview-free and blazing fast application</h2>
    <img src="https://i.imgur.com/dHLmxfO.jpg?2" width="114" height="124" />
    <em style="textAlign: center;">Look at how happy this native cat is</em>
`;

export default class API extends Component {
  constructor(props) {
    super(props);
    this.state = {
        coba : `<p><img src="https://simteg.bintangpelajar.net/assets/fileuser/lampiran_soal/file_1582624704.PNG" alt=""></p>`,
        coba2 : `<p><img src="https://simteg.bintangpelajar.net/assets/fileuser/lampiran_soal/file_1582624996.PNG" alt=""></p>`,
        coba3 : `<p><img src="https://bpjuara.bintangpelajar.com/assets/fileuser/lampiran_soal/file_1591348570.JPG" alt=""  width="55" height="92" ></p>`,
        coba4 : `<p><img src="https://bpjuara.bintangpelajar.com/assets/fileuser/lampiran_soal/file_1591348570.JPG" alt=""></p>`
    };
  }

  render() {
    // const htmlContent = `<p><a href="http://jsdf.co">&hearts; nice job!</a></p>`;
    return (
      <View>
          <HTML html={this.state.coba3} style={styles}/>
          {/* <HTML html={this.state.coba2} imagesMaxWidth={Dimensions.get('window').width}/>
          <HTML html={this.state.coba}/> */}
          <HTML html={this.state.coba4} imagesMaxWidth={Dimensions.get('window').width}/>
          {/* <HTMLView value={this.state.coba2}/> */}
          </View>
      // <HTMLView
      //   value={htmlContent}
      //   stylesheet={styles}
      // />
    );
  }
}

const styles = StyleSheet.create({
  img: {
    resizeMode:'stretch'
  },
});

来自数据原始html的图像无法在本机反应中完整显示

0 个答案: