Network Image is not showing in React Native

Question

I am actually making an ecommerce App and using Nodejs as a backend with sequelize as ORM for Mysql database and React-native(RN) for front-end. My issue is that, I neither get any image nor any error in front-end, but when I open the image in browser, it actually opened and one more thing, I am getting response from localhost...These are my files for backend first.

models/productImage.js

module.exports = (sequelize, DataTypes) => {
  const ProductImage = sequelize.define('ProductImage', {
    productId: DataTypes.INTEGER,
    fileName: DataTypes.STRING
  }, {});
  ProductImage.associate = function (models) {
    ProductImage.belongsTo(models.Product, {
      onDelete: 'cascade'
    });
  };
  return ProductImage;
};

routes/productImage.js

let Image = new ProductImage({
            productId: req.body.productId,
            fileName: req.file.filename
        })

        if (Image.fileName) {
            Image.fileName = 'http://127.0.0.1:4000/static/' + Image.fileName;
        }

        await Image.save();
        res.send(Image)

Response

[
  {
    "id": 1,
    "name": "Iphone",
    "slug": "iphone",
    "price": "100000",
    "color": "blue",
    "isActive": 1,
    "createdAt": "2019-08-30T08:59:36.000Z",
    "updatedAt": "2019-08-30T08:59:36.000Z",
    "images": [
      {
        "fileName": "http://127.0.0.1:4000/static/images-1567155576836.jpg"
      },
      {
        "fileName": "http://127.0.0.1:4000/static/images-1567155783680.jpg"
      }
    ]
  }
]

App.js

app.use('/static', express.static('public'))

FronEnd Part(RN)

state = {
    products: []
  }


async componentDidMount() {
    let products = await API.home();
    this.setState({
      products: products
    })
  }

 <FlatList
      data={this.state.products}
      renderItem={({ item }) => (
      <View>
         <Text>{item.name}</Text>
         <Text>{item.price}</Text>
        <Image style={{ width: 400, height: 400 }}
        resizeMode={'contain'}
       source={{ uri: item.images[0].fileName }} />
     </View>
    )}
   keyExtractor={item => item.id.toString()}     
 />

Answer 1

Thank you guys for replying, but I figure it out myself.There was an Ip address problem.when I set the Ip address as the same as I am using to send an request to backend in fetch request, it worked.In other words, in image.fileName rather than setting an random Ip.I set the host Ip address..

I leave this answer for someone who need help in future regarding the same question...

Cheerio