無法在本機反應中顯示來自 rest api 的圖像

Question

working on an ecommerce app in react native,and fetching my data from a django rest api, however when i try to display the image of products in react native image doesnt seem to appear yet am sure it appears in my api.

//===這里是我的 api 看起來像包含所有產品的樣子

0：
id: 1 title: "mamakits" slug: "mamakit" description: "Prepared value mama pack" price: 75000 active: true img: "https://hero-pregbackend.herokuapp.com/mamakit.png" 數量: 1

1：
id: 2 title: "男用避孕套" slug: "condoms" description: "男用避孕套" price: 10000 active: true 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

代碼看起來是正確的，我嘗試在您的 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

)