React Native-无法从路径导入图像

Question

我有以下基本的本机代码：

import React from 'react';
import {StyleSheet, View, Image} from 'react-native';

//images
import login_blueGirl from './assets/images/login_blueGirl.png';


const App = () => {
  return (
    <>
     <View style={styles.container}>
        <Image source={login_blueGirl}></Image>
     </View>
    </>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column'
  }
});

export default App;

我得到一个Cannot find module './assets/images/login_blueGirl.png'。当我输入./时，VSCode给我自动填充选项：

关于为什么发生这种情况的任何线索吗？

Answer 1

那不是您应该导入图像的方式，而是使用ap.add_argument("-d", "--dataset", default="DEFAULT_DATASET.dat", help="path to input dataset") 。

require

Answer 2

要导入诸如const blueGirl = require("assets/images/login_blueGirl.png");文件之类的静态文件，可以声明

Image

然后您可以在<Image style={styles.image} source={blueGirl} />组件中使用它

</Image>

该图像还用作自动关闭标签，您无需添加其他<div class="slds-resizable"> <input type="range" min="20" max="1000" class="slds-resizable__input slds-assistive-text" id="cell-resize-handle-602" tabindex="0" /> <span class="slds-resizable__handle" onmousedown="{!c.calculateWidth}" ondrag="{!c.setNewWidth}"> <span class="slds-resizable__divider"></span> </span> </div> 标签。

为了完全了解标记和语法的工作原理，请务必查阅官方文档 React Native API

Answer 3

您可以指定要显示的图像的宽度和高度，请执行以下操作：

const App = () => {
  return (
    <View style={styles.container}>
      <Image style={{ width: 100, height: 80 }} source={require("./assets/images/login_blueGirl.png")}></Image>
    </View>
  );
};

或

const styles = StyleSheet.create({
    imgStyle: {
        width: 50,
        height: 50,
    }
});

const App = () => {
    return (
        <View style={styles.container}>
            <Image style={styles.imgStyle} source={require("./assets/images/login_blueGirl.png")}></Image>
        </View>
    );
};