当来自 API 并映射到变量时，React 图像不呈现

Question

首先，感谢这个社区在过去几年帮助我解决了数百个编码问题。值得庆幸的是，在此之前，我几乎无需发布就在这里找到了我需要的所有答案！

不幸的是，这个让我完全难倒了。我正在用 React Native 编写一个新应用程序，从 API 加载 JSON 响应后，我无法在将结果映射到变量然后渲染后渲染图像。

我已经通过将图像 URL 包含在文本视图中来检查图像 URL 是否通过 JSON 响应和映射函数正确接收。我还确认它是“https”而不是“http”。

我已经尝试实现这些论坛上提到的许多方法来确保图像加载，但无论出于何种原因，我只获取文本字段而不是图像。Image 容器在那里，但只是空的。当我将响应中的 URL 直接放入 Image 'uri' 字段时，它工作正常。下面是有问题的代码片段，当我使用完整代码在 Snack 上运行它时，它没有显示任何错误并且可以正常工作。

function buildView (data){

  var itemData = data.map((d) => 

      <View style={{padding: 10}}>

        <Image

          source={{uri: '{d.galleryURL}'}}

          key={d.itemID}

          style={{width: 200 , height: 140}}

          loadingIndicatorSource=<ActivityIndicator />

          resizeMode={'contain'}

        />

        <Text key={d.title}>Title: {d.title}</Text>

      </View>

  );

  return(itemData);

}

if (this.state.isLoading!=true) {

  var dataView = buildView(this.state.dataSource);

  return(

      <ScrollView

        style={{ flex: 1}}

        scrollEnabled={true}

        showsVerticalScrollIndicator={true}

        >

        <View style={{ flex: 1, padding: 60 }}>

            {dataView}

        </View>

      </ScrollView>

  );

}

如果有人可以帮助确定我在代码中遗漏了什么，将不胜感激。我唯一的怀疑是与它不重新渲染有关，但目前我不明白为什么。

Answer 1

'{d.galleryURL}'在 Javascript 中实际上是一个字符串，其值等于{d.galleryURL}。显然，不会显示具有该值的图像。如果您galleryURL正在工作，您应该能够显示它：<Image&nbsp; &nbsp; source={{uri: d.galleryURL}}&nbsp; &nbsp; key={d.itemID}&nbsp; &nbsp; style={{width: 200 , height: 140}}&nbsp; &nbsp; loadingIndicatorSource=<ActivityIndicator />&nbsp; &nbsp; resizeMode={'contain'}/>