Question

当我尝试从道具加载图像时，我收到以下错误 警告：失败道具类型：提供给source无效道具image 这是我的代码

的src /部件/普通/ Header.js

<View style={viewStyle}>
  <Text style={textStyle}>{props.children}</Text>
  <Image style={{height:25, width:25}} source={props.imageUri} />
</View>

的src / index.js

<Header imageUri='../../images/logout.png'>My App</Header>

，图像位于路径src / images / logout.png

请帮助

Answer 1

你的来源是错误的。

应该使用 uri 属性。

要么使用require：

<Image source={require('.../../images/logout.png')} />

反过来，你也可以要求这个道具

<Image source={require(props.imageUri)} />

或者您按原样使用Uri：

<Image source={{uri: props.imageUri }} />

Refer to the documentation for more details here

Answer 2

对于本地图像路径，语法为

<Image style={{height:25, width:25}} source={require(props.imageUri)} />

Answer 3

作为React Native Documentation says，需要在编译包之前先加载所有图像源。

在React Native中添加一个简单的图像应该是这样的：

<Image source={require('./path_to_your_image.png')} />

假设您有这个：

const slides = {
  car: './car.png',
  phone: '../phone.png',
}

然后，您将slides作为参数传递，但是仍然不能像这样使用它（即使在逻辑上应该可以使用）：

<Image source={require(props.car)} />

在require()内使用sildes{}

const slides = {
  car: require('./car.png'),
  phone: require('../phone.png'),
}

并像这样使用它：

<Image source={props.car}></Image>

Answer 4

<Image
            source={this.props.imgUri}
            style={{
              height: 30,
              width: 30,
              resizeMode: 'contain',
            }}
          />

称呼

 <StyledInput text="NAME" imgUri={require('../assets/userIcon.png')} ></StyledInput>

Answer 5

使用以下方法将error转换为react-native：

<Image style={{height:25, width:25}} source={require(props.imageUri)} />

代替使用：

<Image style={{height:25, width:25}} source={props.imageUri}/>

并从Parent组件将以下代码作为imageUri prop传递。

require('./public/images/image.png')

它为我工作，希望这对其他人有帮助。

Answer 6

您可以像这样设置道具的图像来源：在组件中：

<Image source={props.path} >

并将源传递给组件，如下所示：在父母中：

<
.
.
path={require("../assets/images/icon.svg")}
.
.
>

Answer 7

您可以将Image作为道具子直接放置在Component中。

<ComponentA>
        <Image source={require('./src/assets/localisation-icon.svg')} />
</ComponentA>

组分A将由

组成

function ComponentA(props) {
    return (<View> {props.children} </View>); 
 }

这将渲染图像。

作为道具传递的加载图像反应原生

7 个答案: