cant display image from rest api in react native

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.

//===here is how my api get looks like that contains all the products

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

1:
id: 2 title: "Male Condoms" slug: "condoms" description: "Male condoms" price: 10000 active: true img: "https://hero-pregbackend.herokuapp.com/lifeguard_cdms.jpeg" quantity: 1

here is how i have handled displaying the image of the product in my 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;

//==however when i try to display the image of the product with source nothing is displayed and i cant seem to find out why, any help is welcome asap.thanks

Answer 1

The code looks correct, I tried opening one of the images in your api response sample and got a 404 error ( https://hero-pregbackend.herokuapp.com/lifeguard_cdms.jpeg ), maybe that's the real issue here?

Answer 2

I believe the issue is with the path or url of your image. Upon clicking the image url we can see all the other urls and it says none of those matches your requested path. Please make sure you have added the MEDIA_ROOT and MEDIA_URL in your settings.py and added that path to the urlpatterns of the urls.py . It can be something like following:

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

Answer 3

You must correct your media url in django app. uri path is not reachable. request return 404 error.

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

)