android - 找不到图像的相对/本地目录 - React Native

标签 android ios reactjs react-native

我正在尝试显示我的计算机文件中的图像。然而,它不会出现。我做了一些调试,发现当我将我的目录设置为这个时:

    source={{uri:'http://www.telegraph.co.uk/content/dam/Travel/galleries/travel/activityandadventure/The-worlds-most-beautiful-mountains/mountains-fitzroy_3374108a.jpg'}}

它按照我想要的方式在屏幕中央显示图像。我不想使用网络地址,我想使用相对地址。所以我用这个:

source={{uri:'/./pictures/m.jpg'}}

当我执行此操作时,它没有图像或出现错误。 如何让图像出现在相对目录中? 这是我的全部代码:

    import React, { Component } from 'react';
import { Button,Alert, TouchableOpacity,Image, Dimensions } from 'react-native'

import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
} from 'react-native';

class Project extends Component {
  render() {
    return (
      <View style={{backgroundColor: '#375D81', flex: 1}}>

        <View style = {styles.container}>
             <Image source={{uri: './pictures/Blur.png/'}} style={{ resizeMode: 'cover', width: 100, height: 100 }}/>
          <TouchableOpacity style = {styles.buttonText1} onPress={() => { Alert.alert('You tapped the button!')}}>
             <Text style={styles.text}> 
              Button 1
             </Text>
           </TouchableOpacity>

           <TouchableOpacity style = {styles.buttonText2} onPress={() => { Alert.alert('You tapped the button!')}}>
             <Text style= {styles.text}>
              Button 2
             </Text>
           </TouchableOpacity>

        </View>
      </View>
    );
  }
}

这是我的文件夹: enter image description here 提前谢谢你。

最佳答案

当使用本地目录时,最好使用require函数,例如:

 <Image source={{require('./pictures/Blur.png/')}} style={{ resizeMode: 'cover', width: 100, height: 100 }}/>

关于android - 找不到图像的相对/本地目录 - React Native,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47230340/

相关文章:

java - iOS 应用程序可以通过蓝牙与 Mac 上的 Java 应用程序通信,而无需创建 OS X 应用程序吗?

javascript - useEffect 垃圾邮件请求

android - Kotlin:在 Activity 中使用 BroadcastReceiver 时未解析的本地类

java - OSMDroid Bonus Pack - gradle.build 错误 - 无法解决依赖关系

android - 在 PackageManager.GET_CONFIGURATIONS 找不到名称异常

ios - 在 Swift 中持续更新 UILabel

ios - iOS中需要将UITextField的字符输入限制为两个字符

javascript - 当加载网页调整为在加载时将 url 框隐藏在 androids 上时,它叫什么

javascript - 如何在一个操作中进行多个 api 调用(一键)

linux - 通过 `creact-react-app` react 应用程序不工作