无法在react native中显示来自rest api的图像

Question

在react native中开发电子商务应用程序，并从django rest api中获取我的数据，然而，当我试图在react原生图像中显示产品的图像时，我确信它似乎还没有出现在我的api中。

//===这是我的api get的样子，它包含了的所有产品

0:
id:1标题："；mamakits"；鼻涕虫："；mamakit"；描述："；预制价值妈妈包"；价格：75000活动：trueimg："https://hero-pregbackend.herokuapp.com/mamakit.png"数量：1

1:
id:2标题："；男性避孕套"；鼻涕虫："；避孕套"；描述："；男用避孕套；价格：10000活动：trueimg："https://hero-pregbackend.herokuapp.com/lifeguard_cdms.jpeg"数量：1

以下是我如何在MamakitShop.js 中显示产品的图像

import React, {useState,useEffect} from "react";
import PropTypes from 'prop-types';
import {StatusBar,StyleSheet,View,ScrollView,Image,Dimensions,FlatList,Text,ActivityIndicator} from 'react-native';
import  Container  from '../components/Container/Container';
import Header from '../components/Header/Header';
import Heading from '../components/Heading/Heading';
import Bigdiv from '../components/Bigdiv/Bigdiv';
import MamaCard from '../components/ListCard/MamaCard';
import VerticalSeparator from '../components/Wallet/VerticalSeparator';
import {connect} from 'react-redux';
import {getProductList, GET_PRODUCTS_LIST} from '../actions/products';
import {useNavigation} from '@react-navigation/native';
import {useSelector,useDispatch} from 'react-redux';
const  MamaKitShop = () =>  {
const [isFetching, setFetching] = useState(true);
const [data, setData] = useState([]);

const navigation = useNavigation()
//ican as well use global dispatch
const dispatch = useDispatch()
const productData = useSelector(state => {
return state.products.productList
})
useEffect(() => {
setFetching(true);
fetch('https://hero-pregbackend.herokuapp.com/shop/')
.then((response) => products = response.json())
.then((products) => setData(products))
.catch((error) => console.error(error))
.finally(() => setFetching(false));
}, []);
return (
<>
<StatusBar translucent={false} barStyle="light-content"/> 
<View>
{isFetching ?  <ActivityIndicator size="large" /> : (
// <View style={{flexDirection:'row',flexWrap:"wrap",margin:8,display:"flex",flex: 1,}}>
<FlatList
data={data}
keyExtractor={({ id }, index) => id.toString()}
renderItem={({ item }) => (
<MamaCard 
name={item.title}
customIcon={
<Image resizeMode="contain" style={{width:100,height:80,margin:15}} 
source={{uri:item.img}} 
/>
}       
price={item.price}
onPress={() => {
navigation.navigate("ProductDetails",{
itemId:item.id,
itemTitle:item.title,
itemImg:item.img.url,
itemPrice:item.price,
itemDescription:item.description,
itemQuantity:item.quantity

})
}}
/>
)}
contentContainerStyle={{flexDirection:"row",flexWrap:"wrap"}}
/>
// </View>
)}
</View>
</>
)
}
// const mapStateToProps = (state) => {
//     const items = state.products.productList || {}
//     return {
//         items,
//         isFetching:state.products.isFetching,
//     }
// }
export default MamaKitShop;

//==然而，当我试图显示有来源的产品的图像时，没有显示任何内容，我似乎不知道为什么，欢迎尽快提供任何帮助。谢谢

Answer 1

代码看起来是正确的，我试图打开你的api响应示例中的一个图像，但得到了404错误(https://hero-pregbackend.herokuapp.com/lifeguard_cdms.jpeg)，也许这才是真正的问题？

Answer 2

我认为问题出在图像的path或url上。点击图片url后，我们可以看到所有其他url，并显示没有一个与您请求的路径匹配。请确保已在settings.py中添加MEDIA_ROOT和MEDIA_URL，并将该路径添加到urls.py的urlpatterns。它可以是以下内容：

urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

Answer 3

您必须在django应用程序中更正您的媒体url。无法访问uri路径。请求返回404错误。

from django.conf import settings
from django.conf.urls.static import static
urlpatterns = patterns('',
# ... the rest of your URLconf goes here ...
) + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT

)