gpt4 book ai didi

reactjs - React-Native Image 提供给图像的 Prop 'source' 无效

转载 作者:行者123 更新时间:2023-12-03 13:28:05 25 4
gpt4 key购买 nike

我认为这是一个非常烦人的错误,感觉没有解决方案,但我想分享和询问..我从服务器获取数据,并从那里获取图像源,并在我的移动 react 中使用相同的图像路径- native 应用程序。

我像这样从服务器获取数据:

$id = $request->userid;
$items = DB::table('item_user')->where('user_id', $id)->latest()->get();

$new = new Collection();

foreach($items as $item){

$new[] = array(
... ,
'picturePath' => 'require'."('./". $item->picturePath ."')"
);

}

return $new;

在前端我尝试渲染并且我在本地拥有这些图像。所以当我在本地使用它时,例如:

require('./images/...')

它有效..但像这样它不起作用:

_renderItem = ({item}) => {

return(
<View>
<Image source={ item.picturePath } style={{width: 15, height: 15}}/>
</View>
);

};


render(){
return(

<View>
<FlatList
data={this.state.items}
renderItem={this._renderItem}
keyExtractor={this._keyExtractor}
/>
</View>
);
}

我收到错误,我该如何解决这个问题:

Warning: Failed prop type: Invalid prop 'source' supplied to 'Image'.

最佳答案

这不是动态分配图像的推荐方法,因为 React Native 在编译包之前必须知道所有图像源。

根据文档,以下是如何动态加载图像的示例:

// GOOD
<Image source={require('./my-icon.png')} />;

// BAD
var icon = this.props.active ? 'my-icon-active' : 'my-icon-inactive';
<Image source={require('./' + icon + '.png')} />;

// GOOD
var icon = this.props.active
? require('./my-icon-active.png')
: require('./my-icon-inactive.png');
<Image source={icon} />;

https://facebook.github.io/react-native/docs/images.html

希望对你有帮助

编辑:如果您知道可以加载的所有图像,您可以尝试如下操作:

// Create a file containing the references for your images

// images.js
const images = {
logo: {
uri: require('your-image-path/logo.png')
},
banner: {
uri: require('your-image-path/banner.png')
}
}

export { images };


//YourComponent.js
import { images } from 'yourImagesPath';

// for this test, expected to return [ { name: logo }, { name: banner} ]
const imagesFromTheServer = (your fetch);

imagesFromTheServer.map(image => {
if (!images[image]) {
return <Text>Image not found</Text>;
}
return <Image source={images[image].uri} />; // if image = logo, it will return images[logo] containing the require path as `uri` key
});

这很 hacky,但可能有效。

如果有帮助请告诉我

关于reactjs - React-Native Image 提供给图像的 Prop 'source' 无效,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50334238/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com