React Native Image not Rendering - ios

Question

I am building a simple React Native app in which if you search a book, it will find the google books image link stored in a database for that book and map it. However, I am getting an issue. The images aren't rendering on the app, and I've tried multiple solutions to fix this. None of them worked. Please help.
Here is my code:
class Search extends Component {
constructor(props) {
super(props);
this.state = {
search: '',
loading: false,
goBack: false,
results: [],
};
}
render() {
return (
<ScrollView style={{ backgroundColor: '#fff' }}>
<Text></Text>
<Text></Text>
<View style={{ justifyContent: 'center', alignItems: 'center' }}>
<Text style={{ fontSize: 30, marginTop: 20, textAlign: 'center' }}>
Search
</Text>
<TextInput
value={this.state.email}
placeholder="Search For Books"
autoCapitalize="none"
selectionColor="black"
underlineColor="black"
underlineColorAndroid="black"
style={{
marginTop: 50,
fontSize: 20,
width: '75%',
marginBottom: 25,
}}
onChangeText={(e) => {
this.setState({ search: e });
}}></TextInput>
<Button
//icon="login"
mode="outlined"
loading={this.state.loading}
color="black"
onPress={() => {
axios
.post('https://diversitylibrary.herokuapp.com/books/search', {
query: this.state.search,
})
.then((res) => {
console.log(res.data.results.map((obj) => obj));
this.setState({
results: res.data.results.map((obj) => obj),
});
})
.catch((err) => {
console.log(err);
alert(
'Something went wrong. Are you connected to the internet?'
);
});
}}
contentStyle={{
width: 175,
height: 50,
justifyContent: 'center',
alignItems: 'center',
}}>
Search {'->'}
</Button>
<View>
{this.state.results.map((result) => (
<ScrollView>
<Image
key="bookCover"
style={{ width: 200, height: 300 }}
source={{ uri: result.cover }}></Image>
<Text>{result.title}</Text>
</ScrollView>
))}
</View>
</View>
<Text></Text>
<Text></Text>
<Text></Text>
<Text></Text>
</ScrollView>
);
}
}
export default Search;
Thanks. (Let me know if you need to see any other files.)

Answer 1

Try using require like this:
source={require{ uri: result.cover }}