[英]Network Image is not showing in React Native
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. 我实际上是在制作一个电子商务应用程序,并使用Nodejs作为后端,对Mysql数据库使用ORM作为续集,对前端使用React-native(RN)。 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 车型/ 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 路线/ 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.js
app.use('/static', express.static('public'))
FronEnd Part(RN) 前部零件(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()}
/>
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..
谢谢大家的答复,但我自己弄清楚了,这是一个IP地址问题。当我将IP地址设置为与我在获取请求中向后端发送请求的地址相同时,它就可以了。在image.fileName中,而不是设置随机IP。我设置主机IP地址。
I leave this answer for someone who need help in future regarding the same question... 我将这个答案留给以后需要就同一问题进行帮助的人。
Cheerio Cheerio
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.