Question

我已经创建了自己的网站和api，它们是（https://lkcfesnotification.000webhostapp.com），我已经上传了图片并且可以以（http://lkcfesnotification.000webhostapp.com/storage/notifications/August2019/c1nsEktOjtSloxEtnL4d.jpg）的形式查看。我针对此ID的api是（http://lkcfesnotification.000webhostapp.com/api/notifications/33）。但是，当我尝试获取api时，我可以显示所有文本，但不能显示图像和超链接以下载文件。如何解决这个问题

我尝试使用它，但是还是没有运气 {{uri：member.image}}

    <Image
        value={member ? member.image : ''} 
        source={{uri: 'http://lkcfesnotification.000webhostapp.com/storage/' + member}}
        style={{width: 60, height: 60}}
      />

我希望使用hyperink获取我的图像和文件，以便通过Google浏览器下载

    import React, { Component } from 'react';
import {
  Alert,
  Image,
  StyleSheet,
  ScrollView,
  View,
  Text,
} from 'react-native';
import {
  InputWithLabel
} from './UI';
import { FloatingAction } from 'react-native-floating-action';

type Props = {};
export default class ShowScreen extends Component<Props> {
  static navigationOptions = ({navigation}) => {
    return {
      title: navigation.getParam('headerTitle')
    };
  };

  constructor(props) {
    super(props)

    this.state = {
      id: this.props.navigation.getParam('id'),
      member: [],
    };

    this._load = this._load.bind(this);
  }

  componentDidMount() {
    this._load();
  }

  _load() {
    let url = 'http://lkcfesnotification.000webhostapp.com/api/notifications/' + this.state.id;

    fetch(url)
    .then((response) => {
      if(!response.ok) {
        Alert.alert('Error', response.status.toString());
        throw Error('Error ' + response.status);
      }

      return response.json()
    })
    .then((member) => {
      this.setState({member});
    })
    .catch((error) => {
      console.error(error);
    });
  }

  render() {
    let member = this.state.member;
   // let af = 'http://lkcfesnotification.000webhostapp.com/storage/';
    console.log(member);
    console.log(member.image);
    //let image = JSON.parse(member.image)
    return (
      <View style={styles.container}>
        <ScrollView>
          <InputWithLabel style={styles.output}
            label={'Title'}
            value={member ? member.title : ''}
            orientation={'vertical'}
            editable={false}
          />
          <InputWithLabel style={styles.output}
            label={'Department'}
            value={member ? member.department : ''}
            orientation={'vertical'}
            editable={false}
          />
          <InputWithLabel style={styles.output}
            label={'Publish'}
            value={member ? member.updated_at : ''}
            orientation={'vertical'}
            editable={false}
          />
          <InputWithLabel style={[styles.output, {height: 800, textAlignVertical: 'top'}]}
            label={'Description'}
            value={member ? member.description : ''}
            orientation={'vertical'}
            editable={false}
            multiline={true}
          />
          <Image
            value={member ? member.image : ''} 
            source={{uri: 'http://lkcfesnotification.000webhostapp.com/storage/' + this.state.member.image[0]}}
            style={{width: 60, height: 60}}
          />  
        </ScrollView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: '#fff',
  },
  output: {
    fontSize: 24,
    color: '#000099',
    marginTop: 10,
    marginBottom: 10,
  },
});

Answer 1

以下内容将使您对该问题有所了解。（我还没有添加完整的工作代码，但是提供了一个可以让您对此问题有所了解的代码）

看到您的api响应后，我看到图像是一个数组，而不只是一个对象。此外，这是一个字符串，您需要将其转换为JSON对象。

JSON.parse method can help you with converting your string to JSON object.

在您的API中，图片是一个数组。请注意[]，这意味着您的图像是一个数组。

这意味着您只想显示图像阵列或仅显示单个图像。

如果要显示所有图像，请遍历member.image并显示它。如果您只想显示单个图像，请在下面尝试一下

在渲染方法中声明一个变量，并将其用于图像。（使用前请确保未定义成员对象

let memberImages = JSON.parse(member.image);

   { memberImages && memberImages[0] && 
         <Image
            value={member ? member.image : ''} 
            source={{uri: 'http://lkcfesnotification.000webhostapp.com/storage/' + member.image[0]}}
            style={{width: 60, height: 60}}
          />  
   }

Answer 2

您正在image对象中获取member的数组。也是stringified版本，您需要对其进行解析以进一步使用。

您可以尝试一下。

render() {
    let member = this.state.member;
    let af = 'http://lkcfesnotification.000webhostapp.com/storage/';

    let image = member && JSON.parse(member.image) //parse your array first

    return (
      <View style={styles.container}>
        <ScrollView>
          ...     
          <Image 
            source={{uri: 'http://lkcfesnotification.000webhostapp.com/storage/' + image[0]}}
            style={{width: 60, height: 60}}
          />  
        </ScrollView>
      </View>

更新

Demo

直接在下面的JSON中进行了测试，因为访问您的CORS时遇到URL错误。

{"id":33,"title":"UTAR (Sungai Long Campus) Career Day","description":"<p style=\"margin: 0px 0px 6px; font-family: Helvetica, Arial, sans-serif; color: #1c1e21;\">DARP s organizing UTAR (Sungai Long Campus) Career Day and the details are as follows:-<\/p>\r\n<p>&nbsp;<\/p>\r\n<p style=\"margin: 6px 0px 0px; display: inline; font-family: Helvetica, Arial, sans-serif; color: #1c1e21;\">Date: 1 August 2019 (Thursday)<br \/>Time: 10.00am - 4.00pm<br \/>Venue: Multipurpose Hall (KB Block), Sungai Long Campus<\/p>","image":"[\"notifications\\\/August2019\\\/c1nsEktOjtSloxEtnL4d.jpg\",\"notifications\\\/August2019\\\/WKka4FvUxFyNQpGQHSo8.jpg\",\"notifications\\\/August2019\\\/KWKZ4XnlkjlK7vHEdHln.jpg\",\"notifications\\\/August2019\\\/eNDFFu4hFHFMBEsR94DV.jpg\",\"notifications\\\/August2019\\\/IWH0eg3IpG59qapIoHj3.jpg\"]","attachment":"[{\"download_link\":\"notifications\\\/August2019\\\/SXMtnNb31ndgDnCWNC57.txt\",\"original_name\":\"dsadasdsa.txt\"},{\"download_link\":\"notifications\\\/August2019\\\/CDEZG6tJhrbVuxlfMiBb.txt\",\"original_name\":\"fyprefereance.txt\"}]","department":"D3E","link":null,"created_at":"2019-08-03 03:52:11","updated_at":"2019-08-03 03:52:11","deleted_at":null}

您可以检查console.log，了解member.parse如何提供正确的图像阵列。

更新2

您可以遍历image以获取所有图像。

{image && image.length && image.map(image => {
      return <Image 
            source={{uri: 'http://lkcfesnotification.000webhostapp.com/storage/' + image}}
            style={{width: 60, height: 60}}
          />  
   })
}

无法从API渲染图像

2 个答案: