javascript - Image not load local file with require - Stack Overflow

admin管理员组

文章数量:1391989

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.

my code:

Card.js

I tried this:

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

and this:

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

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.

my code:

Card.js

I tried this:

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

and this:

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

• javascript
• react-native

Share Improve this question Follow asked Oct 29, 2018 at 13:54 V.CozzatellaV.Cozzatella 71922 gold badges99 silver badges1515 bronze badges 5

• What is this syntax? Why are you doing require? – Baruch Commented Oct 29, 2018 at 13:56
• What is the error you get? – Nedko Dimitrov Commented Oct 29, 2018 at 14:07
• because on the page of react-native says that {uri:'exemple.it/image.jpg'} is for load online image and require('./image.jpg') is for load local image @Baruch – V.Cozzatella Commented Oct 29, 2018 at 14:09
• this is the error : Invalid call at line 41: require(this.props.imagine) @Nedko Dimitrov – V.Cozzatella Commented Oct 29, 2018 at 14:14
• why it is require(this.props.imagine) in your example you are using require({this.props.image}) – Nedko Dimitrov Commented Oct 29, 2018 at 14:23

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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

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

And Card.js is the same like you.

You have to first import an image and use it.

App.js

import image from './img/demo.jpg';

class App extends Component {

  static navigationOptions = { header: null }

  render() {
    return (
    <Card
      image={image}
    />  
   );
  }
}

card.js

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

OR

App.js

class App extends Component {

  static navigationOptions = { header: null }

  render() {
    return (
    <Card
      image={'logo.png'}
    />  
   );
  }
}

card.js

class Card extends Component {
  render() {
    return (
      <View>
           <img src={require(`./img/${this.props.image}`)} alt='img' style={styles.imageBox}/>

       </View>
    );
  }
}

本文标签： javascriptImage not load local file with requireStack Overflow