React-Native Image 提供给图像的无效道具“源" [英] React-Native Image Invalid prop 'source' supplied to Image

问题描述

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

I think this is a very annoying bug and feels like there is no solution but I want to share and ask.. I fetch data from server and I get image source from there and I use same Image paths in my mobile react-native App.

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

I fetch data from server like this :

$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;

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

and in front-end I try to render and I have these images locally. So when I use it locally like :

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

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

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

It works.. but like this its not working :

_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，我该如何解决这个问题:

and I get error, How I can solve this :

警告:道具类型失败:提供给图像"的道具来源"无效.

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

推荐答案

这不是动态分配图片的推荐方式，因为 React Native 在编译你的包之前必须知道你所有的图片来源.

This is not the recommended way to assign dynamically images since React Native must know all your images sources before compiling your bundle.

根据文档，这是一个如何动态加载图像的示例:

According to the docs, here's an example of how to load images dynamically:

// 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/图片.html

希望能帮到你

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

If you know all the images that could be loaded, you can try something like this:

// 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
});

这很棘手，但可能有效.

This is quite hacky but may work.

如果有帮助请告诉我

这篇关于React-Native Image 提供给图像的无效道具“源"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！