Javascript 映像未加载需要的本地文件

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

我的代码：

Card.js

我试过这个：

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

类卡扩展组件{
render（）{
返回(
);
}
}

这是：

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

类卡扩展组件{
render（）{
返回(
);
}
}

App.js

class App extends Component {

  static navigationOptions = { header: null }

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

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

类应用程序扩展组件{
静态导航选项={header:null}
render（）{
返回(
);
}
}

您必须首先导入图像并使用它

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

App.js
从“./img/demo.jpg”导入图像；
类应用程序扩展组件{
静态导航选项={header:null}
render（）{
返回(
);
}
}
card.js
类卡扩展组件{
render（）{
返回(
);
}
}

或

App.js

class App extends Component {

  static navigationOptions = { header: null }

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

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

类应用程序扩展组件{
静态导航选项={header:null}
render（）{
返回(
);
}
}
card.js
类卡扩展组件{
render（）{
返回(
);
}
}

与

ReactNative

图像文档一样

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

//很好
;
//坏的
var icon=this.props.active？““我的图标处于活动状态”：“我的图标处于非活动状态”；
;
//好
var icon=this.props.active
? 需要（“./my icon active.png”）
：require（'./my icon inactive.png'）；
;

所以试试这个 在App.js中首次加载图像

class App extends Component {

  static navigationOptions = { header: null }

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

类应用程序扩展组件{
静态导航选项={header:null}
render（）{
返回(
);
}
}

---

Card.js和您一样。

这是什么语法？你为什么要做

require

？你得到的错误是什么？因为react native页面上说，{uri:''}用于加载在线图像，require（'./image.jpg'）用于加载本地图像@baruch这是错误：第41行的调用无效：require（this.props.imagine）@Nedko Dimitrovwhy它是require（this.props.imagine）在您的示例中，您正在使用require（{this.props.image}）谢谢，如果我将一个值传递到另一个页面，我在react导航方面或多或少会遇到相同的问题。我并不总是看到带有require示例的图像：this.props.navigation.navigation（'SecondScreen'，{image:'../image.jpg'}>）。图像源代码为this.props.navigation.state.params.image