API映像不加载在react native中

Question

我在尝试加载来自API的图像(与其他数据一起(时遇到问题，但它没有显示在手机/模拟器上，也没有加载。

import React, { useState, useEffect } from 'react';
import { View, Text, Image, StyleSheet, FlatList, TouchableOpacity } from 'react-native';
import api from '../services/api';
export default function SpotList({ tech }) {
const [spots, setSpots] = useState([]);
useEffect(() => {
async function loadSpots() {
const response = await api.get('/spots', { // /spots?tech=tecnologia
params: { tech }
})
setSpots(response.data);
console.log(spots)
}
loadSpots();
}, []);
return (
<View style={styles.container}>
<Text style={styles.title}>Empresas que usam <Text style={styles.bold}>{tech}</Text></Text>
<FlatList 
style={styles.list}
data={spots}
keyExtractor={spot => spot._id}
horizontal
showsHorizontalScrollIndicator={false} //barra de rolagem
renderItem={({ item }) => (
<View style={styles.listItem}>
<Image style={styles.thumbnail} source={{ uri: item.thumbnail_url }}/>
<Text style={styles.company}>{item.company}</Text>
<Text style={styles.price}>{item.price ? `R$${item.price}/dia` : 'GRATUITO'}</Text>
<TouchableOpacity onPress={() => {}} style={styles.button}>
<Text style={styles.buttonText}>Solicitar Reserva</Text>
</TouchableOpacity>
</View>
)}
/>
</View>
);
}

当我运行console.log(spots(命令时，终端会正常地向我返回URL。

[
{
"techs": [
"ReactJS",
"Node.js"
],
"_id": "5f10b8e8ed571238cc9434ad",
"user": "5f10b3afed571238cc9434ab",
"thumbnail": "google-1594931431941.jpg",
"company": "Google",
"price": 68,
"__v": 0,
"thumbnail_url": "http://localhost:3333/files/google-1594931431941.jpg",
"id": "5f10b8e8ed571238cc9434ad"
}
]

当我通过浏览器打开thumbnail_url时，它会正常显示图像。

Answer 1

尝试在样式中添加this缩略图：{宽度：50，高度：50，}

你可以在这里找到更多关于这方面的信息：https://reactnative.dev/docs/image