React Native无法显示对象中的图像

Question

source={require("../assets/image1.png")}-工作----------------------------------------------------------------------------------------------------------------------------------------------
但是->source={require(image.img)}-不起作用(image.img="../assets/image1.png")

export default function Home({ navigation}) {
var images = [
{
key: 0,
img: "../assets/image1.png",
user: "milos_markovic",
}
]
return (<View style={styles.slike}>
{images.map(image => {
return(<View >
<Image
source={require(image.img)}

//this doesn't work (source={require(image.img)})   , image.img = "../assets/image1.png"
//but this -> source={require("../assets/image1.png")} work, why i cant get image from object 

/>
</View>)
})}
</View>
)}

Answer 1

尝试在对象中使用require:

import * as React from 'react';
import { Text, View, StyleSheet,Image } from 'react-native';
import Constants from 'expo-constants';
// You can import from local files
import AssetExample from './components/AssetExample';
// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';
export default function App() {
const images = [
{
key: 0,
img: require('@expo/snack-static/react-native-logo.png'),
user: "milos_markovic",
}
]
return (
<View style={styles.container}>
<Image
style={styles.tinyLogo}
source={images[0].img}
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
},
paragraph: {
margin: 24,
fontSize: 18,
fontWeight: 'bold',
textAlign: 'center',
},
});

LIVE示例https://snack.expo.dev/2qkBNGQRg