图像不加载本地文件需要 [英] Image not load local file with require

问题描述

我想加载一个本地图像，但使用 require() 方法时它不断给我错误，在这种情况下我如何在 require 中传递 this.props.image.

I would like to load a local image but with the require() method it keeps giving me error , how I can pass in this case this.props.image in require.

我的代码:

Card.js

我试过了:

class Card extends Component {
  render() {
    return (
      <View>
           <Image source={require(this.props.image)} style={styles.imageBox}/>
       </View>
    );
  }
}

还有这个:

class Card extends Component {
  render() {
    return (
      <View>
           <Image source={require({this.props.image})} style={styles.imageBox}/>
       </View>
    );
  }
}

App.js

class App extends Component {

  static navigationOptions = { header: null }

  render() {
    return (
    <Card
      image='./img/demo.jpg'
    />  
   );
  }
}

推荐答案

在 ReactNative 文档中，Image 说

As in ReactNative documentation for Image says

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

所以试试这个首先在 App.js 中加载图片

So Try this first load image in App.js

class App extends Component {

  static navigationOptions = { header: null }

  render() {
    return (
    <Card
      image={require('./img/demo.jpg')}
    />  
   );
  }
}

而 Card.js 和你一样.

And Card.js is the same like you.

这篇关于图像不加载本地文件需要的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！