![](/img/trans.png)
[英]Flow react native import image error cannot resolve module RelativeImageStub
[英]React Native - cannot import image from path
我有以下基本的反应本机代码:
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 时,给我自动完成选项:
关于为什么会发生这种情况的任何线索?
这不是您应该导入图像的方式,而是使用require
。
const App = () => {
return (
<View style={styles.container}>
<Image source={require("./assets/images/login_blueGirl.png")} />
</View>
);
};
要像.png
文件一样导入 static 文件,您可以声明
const blueGirl = require("assets/images/login_blueGirl.png");
然后你可以在Image
组件中使用它
<Image style={styles.image} source={blueGirl} />
此外,图像用作自结束标记,您不必添加另一个</Image>
标记。
为了充分理解标签和语法的工作原理,请查看官方文档React Native API
您可以指定要显示的图像的宽度和高度,执行以下操作:
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>
);
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.