Question

使用react-native-image-slider时我的本地图像不显示

从“反应”中导入React，{组件}；导入{ 视图，文本， StyleSheet，按钮图片，可触摸的高光 }来自“ react-native”；从“ react-native-image-slider”导入ImageSlider；

HomeScreen类扩展了组件{

render() {          
    return (
        <View style={styles.container}>         
    <View style={{alignItems: 'center'}}>                   
        <ImageSlider
                loopBothSides
            autoPlayWithInterval={3000}
            images={[
                '../assets/img/art_1.png',
                '../assets/img/art_2.png',
                '../assets/img/art_3.png',          
            ]}  
            style={{width:200, height: 200}}
        />              
    </View>
        </View>
    );
}

} 导出默认的HomeScreen；

常量样式= StyleSheet.create（{ 容器： { 弹性：1， flexDirection：'列'， justifyContent：“中心” } }）;

屏幕上唯一显示的是圆圈图标，告诉您当前正在显示的图像。图片本身不会显示。

Answer 1

对于本地图像，请使用require;

images={[
  require('../assets/img/art_1.png'),
  require('../assets/img/art_2.png'),
  require('../assets/img/art_3.png'),          
]}

Answer 2

尝试一下：

<Image source={item} style={styles.customImage} resizeMode={'contain'} />

- instead of -

<Image source={{ uri: item }} style={styles.customImage} />

const profileSlider = [
    // 'https://placeimg.com/640/640/nature',
    // 'https://placeimg.com/640/640/people',
    // 'https://placeimg.com/640/640/animals',
    // 'https://placeimg.com/640/640/beer',
    require('../images/slider/animals.png'),
    require('../images/slider/beer.png'),
    require('../images/slider/nature.png'),
    require('../images/slider/people.png'),
];

Answer 3

尝试这个

dataSource = {
  [{
      url: require('../assets/img/RPImages/RP111_1.jpg')
    },
    {
      url: require('../assets/img/RPImages/RP111_2.jpg')
    },
  ]
}

react-native-image-slider（无法显示本地图像）

3 个答案:

尝试这个