我认为这是一个非常烦人的错误,感觉没有解决方案,但我想分享并询问..我从服务器获取数据,我从那里获取图像源,并在移动设备中使用相同的图像路径 - 原生App。
我从服务器获取数据,如下所示:
$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;
在前端我尝试渲染,我在本地拥有这些图像。所以当我在本地使用它时:
要求(” ./图像/...')
它有效..但是这样它不起作用:
_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>
);
}
我得到error
,我怎么能解决这个问题:
警告:道具类型失败:提供给“图片”的道具'源'无效。
答案 0 :(得分:5)
这不是推荐的动态图像分配方式,因为在编译捆绑包之前,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但可能有用。
如果有帮助,请告诉我
答案 1 :(得分:1)
作为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>