我实际上正在制作一个电子商务应用程序,并使用 Nodejs 作为后端,并使用 Sequelize 作为 Mysql 数据库的 ORM 和 React-native(RN) 作为前端。我的问题是,我在前端既没有得到任何图像,也没有任何错误,但是当我在浏览器中打开图像时,它实际上打开了,还有一件事,我收到了来自本地主机的响应...这些是我的后端文件首先。
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'))
前端部分(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..
我将此答案留给将来需要帮助的人 问题...
Cheerio
关于javascript - 网络图像未在 React Native 中显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57725742/