Question

我想问一下如何在react native中将动态URL实现为Image组件。图片的完整网址是：

https://xxx.xxx.xx/image/journal/article?img_id=3551069&t=1518189123769

JSON对象是：

{
    "announcements": [
        {
...
 "photoUrl": "/image/journal/article?img_id=3551068&t=1518189123375",
...
}

我使用带有renderItem的FlatList来迭代带有photoUrl列表的数组元素：

<List containerStyle={{ borderTopWidth: 0, borderBottomWidth: 0 }}>
          <FlatList containerStyle={ styles.card }

            data={this.state.announceData}
            renderItem={({ item }) => (
              <TouchableOpacity
              key = {item.articleId}
              // onPress={() => this.props.navigation.navigate('DrawerOpen')}
              style = {styles.card}>

              <View style={{ display: 'flex', flexDirection: 'row' }}>
              <View style={{width: '35%', height: '35%', position: 'relative', top: '15%'}}>
              <Image
              style= {{ height:50, width: 50 }}
              source={{uri:`https://xxx.xxx.xx${item.photoUrl}`}}
            />  
            </View>

            <View style={{width: '65%', flexWrap: 'wrap'}}>              
                <Text style={styles.annoucementTitle}>{item.title}</Text>
                <Text style={styles.annoucementSummary}>{item.summary}</Text>
                </View>
              </View>  
              </TouchableOpacity>
            )}

          />
           </List>

item.title和item.summary正在加载，但图片不会被加载。有人可以提出可能存在的问题吗？我只是测试一个I-phone设备。在Android设计中会出现不同的情况吗？

Answer 1

尝试对图像路径进行硬编码，然后查看它是否有效。还可以在console.log中查看动态URI，看看它是否在某种程度上搞乱了。 Ur使用正确的字符串插值格式，所以我猜它是路径本身的问题。祝你好运

Answer 2

我在这个问题上花了几个小时，但是尽管我深入研究了这个问题，但我发现，这是由本地开发人员做出的设计决定。在github Setting source with string concatenation fails ('Requiring unknown module...')上查看此问题。满足我需求的唯一实现是这样的：

.get()

然后将其导入到您想要使用的位置

Answer 3

感谢您的回答，似乎当我导入本地JSON文件时，图像不会加载。但是，当我使用fetch从Web服务获取相同的数据时，图像最终会加载！我忘了提到我使用EXPO作为设备测试器..

Image中的动态URL反应原生

3 个答案: