无法在本机反应中显示来自rest api的图像

Question

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

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

0:
编号：1 标题：“妈妈” 蛞蝓：“mamakit” 描述：“准备价值妈妈包” 价格：75000 活跃：真 img：“https://hero-pregbackend.herokuapp.com/mamakit.png” 数量：1

1：
编号：2 书名：《男用避孕套》 蛞蝓：“避孕套” 描述：“男用避孕套” 价格：10000 活跃：真 img：“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

您必须在 django 应用程序中更正您的媒体网址。 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

)

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

代码看起来是正确的，我尝试打开您的 api 响应示例中的一张图片并收到 404 错误 (https://hero-pregbackend.herokuapp.com/lifeguard_cdms.jpeg)，也许这才是真正的问题？