反应原生的图像内的动态URL答案

【问题标题】：Dynamic URL inside Image in react native反应原生的图像内的动态URL
【发布时间】：2018-04-19 17:52:59
【问题描述】：

我想问一下如何在 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 设计中会有所不同吗？

【问题讨论】：

您是否记录了整个 url https://xxx.xxx.xx${item.photoUrl} 并在浏览器中打开它以验证它是一个有效的链接？

标签： react-native

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

const sampleImage= require("./assets/sample.png");
.....
....
...
export default {sampleImage}

然后导入这个你想用的地方

【讨论】：

【解决方案3】：

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

【讨论】：