url 图像源 uri React Native 中带有图像变量的路径

Question

我正在尝试显示一个图像，其中的数据是从 api 中获取的并呈现为平面列表，我正在尝试将 sting link 与变量连接或连接，在图像源 uri 但不起作用，我该如何修复它。

<FlatList 
data = {data}
keyExtractor={item => item.id}
showsVerticalScrollIndicator = {false}  
renderItem={({item}) => {
   return (

    <Image 
            source={{ uri: `https://placewave.com/avatar/${item.user_image}` }}
            resizeMode="cover"
            style={styles.userImage}
    /> 

   )
}}
/>

感谢帮助

Answer 1

不幸的是，它不会以这种方式工作。图片不能有条件 source 属性。考虑将 https://placewave.com/avatar/${item.user_image} 移动到一个变量并添加条件以显示某种回退（如 ActivityIndicator），直到您拥有有效的 user_image.

Answer 2

完整的测试代码

import * as React from 'react';
import { Image, Text, View, StyleSheet, FlatList } from 'react-native';
import Constants from 'expo-constants';

export default function App() {
  const data = [{ id: 1, user_image: 'cute-boy-standing-little-white-background-40214306.jpg' }, { id: 1, user_image: 'no image url.jpg' }]
  return (
    <View >
      <FlatList
        data={data}
        keyExtractor={item => item.id}
        showsVerticalScrollIndicator={false}
        renderItem={({ item }) => {
          let uriVar
          if (item.user_image) uriVar = `https://thumbs.dreamstime.com/b/${item.user_image}`
          return (<View>
            {uriVar != null ?
              <Image source={{ uri: uriVar }}

                style={styles.userImage}
              /> : null} </View>)
        }}
      />
      <Text style={styles.paragraph}>
        Hello
      </Text>

    </View>
  );
}

const styles = StyleSheet.create({
  userImage: {
    width: '150px',
    height: '150px',
    borderWidth: 1
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  },
});

Answer 3

谢谢大家的回复，但我找到了答案

首先我定义了urlconst URL = 'https://placewave.com/avatar';

然后包含它：

<Image 
     source={{ uri: URL + '/' + item.user_image}}
     resizeMode="cover"
     style={styles.userImage}
/>

url 图像源 uri React Native 中带有图像变量的路径

url path with image variable in image source uri React Native

react-native

image

react-native-flatlist