Javascript 未从React本机项目中的uri源加载图像

我制作了一个名为

FoodItem

的自定义元素，可以在

FoodItem.js

文件中找到，它的结构如下：

import React from "react";
import {
  StyleSheet,
  Text,
  View,
  ImageBackground,
  Image,
  Dimensions,
  TouchableOpacity,
} from "react-native";

// any food item has the following properties:
// 1. image
// 2. title
// 3. description
// 4. price
// 5. key

const { width: WIDTH, height: HEIGHT } = Dimensions.get("window");

export default class FoodItem extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <TouchableOpacity style={styles.bubbleItem}>
        <Image style={styles.bubbleImage} source={{ uri: this.props.imgSrc }} />
        <Text style={styles.bubbleTitle}>{this.props.title}</Text>
        <Text style={styles.bubbleDescription}>{this.props.description}</Text>
        <View style={styles.bubblePrice}>
          <Text style={styles.priceText}>{this.props.price} RON</Text>
        </View>
      </TouchableOpacity>
    );
  }
}

const styles = StyleSheet.create({
  bubbleItem: {
    flex: 1,
    backgroundColor: "#e3dede",
    margin: 10,
    borderColor: "#bab5b5",
    borderWidth: 2,
    borderRadius: 30,
  },
  bubbleTitle: {
    fontWeight: "bold",
    alignSelf: "center",
    textAlign: "center",
    fontSize: 20,
  },
  bubbleDescription: {
    textAlign: "center",
    padding: 5,
  },
  bubblePrice: {
    position: "absolute",
    backgroundColor: "black",
    margin: 10,
    borderColor: "#bab5b5",
    borderWidth: 2,
    borderRadius: 30,
    left: WIDTH * 0.235,
    top: HEIGHT * 0.14,
  },
  bubbleImage: {
    width: WIDTH * 0.44,
    height: HEIGHT * 0.2,
    borderRadius: 30,
  },
  priceText: {
    color: "white",
    margin: 5,
  },
});

{
    id: 10,
    image: '1.png',
    title: 'Burger',
    description: 'contine vita si sos cu maioneza',
    price: 35
}

项

对象来自何处并不相关。重要的是

项

对象确实是一个有效的对象，具有以下结构：

import React from "react";
import {
  StyleSheet,
  Text,
  View,
  ImageBackground,
  Image,
  Dimensions,
  TouchableOpacity,
} from "react-native";

// any food item has the following properties:
// 1. image
// 2. title
// 3. description
// 4. price
// 5. key

const { width: WIDTH, height: HEIGHT } = Dimensions.get("window");

export default class FoodItem extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <TouchableOpacity style={styles.bubbleItem}>
        <Image style={styles.bubbleImage} source={{ uri: this.props.imgSrc }} />
        <Text style={styles.bubbleTitle}>{this.props.title}</Text>
        <Text style={styles.bubbleDescription}>{this.props.description}</Text>
        <View style={styles.bubblePrice}>
          <Text style={styles.priceText}>{this.props.price} RON</Text>
        </View>
      </TouchableOpacity>
    );
  }
}

const styles = StyleSheet.create({
  bubbleItem: {
    flex: 1,
    backgroundColor: "#e3dede",
    margin: 10,
    borderColor: "#bab5b5",
    borderWidth: 2,
    borderRadius: 30,
  },
  bubbleTitle: {
    fontWeight: "bold",
    alignSelf: "center",
    textAlign: "center",
    fontSize: 20,
  },
  bubbleDescription: {
    textAlign: "center",
    padding: 5,
  },
  bubblePrice: {
    position: "absolute",
    backgroundColor: "black",
    margin: 10,
    borderColor: "#bab5b5",
    borderWidth: 2,
    borderRadius: 30,
    left: WIDTH * 0.235,
    top: HEIGHT * 0.14,
  },
  bubbleImage: {
    width: WIDTH * 0.44,
    height: HEIGHT * 0.2,
    borderRadius: 30,
  },
  priceText: {
    color: "white",
    margin: 5,
  },
});

{
    id: 10,
    image: '1.png',
    title: 'Burger',
    description: 'contine vita si sos cu maioneza',
    price: 35
}

这是我的相关express后端服务器端代码：

const express = require("express");
const app = express();
const server = require("http").createServer(app);
const port = 3000;

app.use("/getImage", express.static("uploads"));

server.listen(port, () => console.log("server running on port:" + port));

因此，

FoodItem

元素试图访问链接，其中图像是从

/uploads

文件夹静态提供的（对于示例：

https://localhost:3000/getImage/1.png

）。事实上，我确信图像是按预期的方式传递的，因为当我从web浏览器访问这些

URI

时，它们确实被传递了。出于某种原因，图像没有加载到

FoodItem

元素中，即使它们会从远程

uri

加载图像；对于示例，这很好（图像正在

FoodItem

元素中加载）：

如果您使用iOS 14，请查看否，我正在使用expo for android developmentOK，我认为您需要更新expo清单，如下所述，

<FoodItem
    key={item.id}
    imgSrc={
        "https://cdn-media-1.freecodecamp.org/images/1*y6C4nSvy2Woe0m7bWEn4BA.png"
    }
    title={item.title}
    description={item.description}
    price={item.price}
/>