使用内容获取图像 url

Question

我正在尝试将图像返回给 React Native 组件。我已经搜索了这个问题，但我无法弄清楚内容返回图像网址时发生了什么。 我试过this 和this。我不完全理解内容链接以及如何返回图片库。在这种情况下，我只想返回第一个条目。有没有人指点一下？

import React from "react";
import { StyleSheet, ListView, View } from "react-native";
const { createClient } = require("contentful/dist/contentful.browser.min.js");
import { List, ListItem, Text } from "react-native-elements";
export default class App extends React.Component {
  constructor() {
    super();
    this.ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
    this.state = { dataSource: this.ds.cloneWithRows(["row1", "row2"]) };
  }
  componentDidMount() {
    this.getContentFromcontentful();
  }
  getContentFromcontentful() {
    const client = createClient({
      accessToken:
      API_KEY,
      space: SPACE_ID,
      resolveLinks: true
    });
    client
    .getEntries({ content_type: "events" })
    .then(response => {
      this.setState({
        dataSource: this.ds.cloneWithRows(
          response.items.map(function(events) {

            return events.fields;
          })
        )
      });
    })
    .catch(function(error) {
      console.log(error);
    });
  }
  render() {
    return (
      <View
        style={{
          flex: 1
        }}
        >
          <Text h1 style={{ alignItems: "center", marginTop: 20 }}>
            Events
          </Text>

          <ListView
            style={styles.container}
            dataSource={this.state.dataSource}
            renderRow={rowData => (
              <List containerStyle={{ marginBottom: 10 }}>
                <ListItem
                  roundAvatar
                  title={rowData.title}
                  subtitle={rowData.description}
                />
              </List>
            )}
          />
        </View>
      );
    }
  }

  const styles = StyleSheet.create({
    container: {
      flex: 1,
      marginTop: 50,
      backgroundColor: "#F5FCFF"
    },
    title: {
      fontSize: 20,
      textAlign: "center",
      padding: 20
    }
  });

JSON 视图

{
  "id": "featuredImage",
  "name": "Featured Image",
  "type": "Array",
  "localized": false,
  "required": true,
  "validations": [],
  "disabled": false,
  "omitted": false,
  "items": {
    "type": "Link",
    "validations": [
      {
        "linkMimetypeGroup": [
          "image"
        ]
      }
    ],
    "linkType": "Asset"
  }
}

当我做一个 console.log(events.fields)

            Object {
            23:38:55:   "fields": Object {
            23:38:55:     "date": "2018-02-21T18:30-06:00",
            23:38:55:     "description": "Removed due to length",
            23:38:56:     "featuredImage": Array [
            23:38:56:       Object {
            23:38:56:         "fields": Object {
            23:38:56:           "file": Object {
            23:38:56:             "contentType": "image/jpeg",
            23:38:56:             "details": Object {
            23:38:56:               "image": Object {
            23:38:56:                 "height": 540,
            23:38:56:                 "width": 960,
            23:38:56:               },
            23:38:56:               "size": 113601,
            23:38:56:             },
            23:38:56:             "fileName": "26814561_1628330070555932_5667937158923006052_n.jpg",
            23:38:56:             "url": "//images.contentful.com/yidayada/
            f4cab422c6637/26814561_1628330070555932_5667937158923006052_n.jpg",
            23:38:56:           },
            23:38:56:           "title": "Fight Night: Dragonball FighterZ",
            23:38:56:         },
            23:38:56:         "sys": Object {
            23:38:56:           "createdAt": "2018-01-30T15:17:01.022Z",
            23:38:56:           "id": "1kTBNvadFqSsyKswKusmcG",
            23:38:56:           "locale": "en-US",
            23:38:56:           "revision": 1,
            23:38:56:           "space": Object {
            23:38:56:             "sys": Object {
            23:38:56:               "id": "h7xctdj5jj2k",
            23:38:56:               "linkType": "Space",
            23:38:56:               "type": "Link",
            23:38:56:             },
            23:38:56:           },
            23:38:56:           "type": "Asset",
            23:38:56:           "updatedAt": "2018-01-30T15:17:01.023Z",
            23:38:56:         },
            23:38:56:       },
            23:38:56:     ],
            23:38:56:     "location": Object {
            23:38:56:       "lat": 339,
            23:38:56:       "lon": -93.0003,
            23:38:56:     },
            23:38:56:     "place": "This Place",
            23:38:56:     "slug": "a-nice-slug",
            23:38:56:     "startTime": "2018-02-21T06:30-06:00",
            23:38:56:     "title": "Awesome",
            23:38:56:     "url": "https://www.facebook.com/",
            23:38:56:   },

Answer 1

是什么阻碍了您在数据中使用网址？它在您的控制台日志输出中：

23:38:56: "url": "//images.contentful.com/yidayada/f4cab422c6637/26814561_1628330070555932_5667937158923006052_n.jpg",

意味着您应该能够执行以下操作：

<ListItem
 roundAvatar
 title={rowData.title}
 subtitle={rowData.description}
 image={rowData.featuredImage[0].fields.file.url}
/>

最好， 本尼迪克特

Answer 2

检查数据是否已加载可防止错误。

            <ListView
                    style={styles.container}
                    dataSource={this.state.dataSource}
                    renderRow={rowData => {
                        var image = rowData.featuredImage
                        ? "http:" + rowData.featuredImage[0].fields.file.url
                        : "https://images.contentful.com/h7xctdj5jj2k/3shmqkZIjSEq6uEkKyWQsu/a2782f623e7a6dac21d9d146fcbe1dcc/1600x900.png";
                        return (
                        <Tile
                            imageSrc={{ uri: image }}