javascript - 当我从数据库中获取图像文件路径时，React Native 不显示图像

Question

我有一个带有课程表的数据库。

我想通过字段图像列中保存的图像路径显示图像。

在我的反应原生应用程序中，我有一个组件列出了购物车的图像保存在磁盘中的购物车

喜欢：C:\Users\Public\Pictures\Rectangle_2.png。然后我将路径放在图像列中。

购物车列表.js

import Carts from './../Cart';
const Item = ({item}) => {
  return (
    <Carts
      name={item.name}
      price={item.price}
      offPrice={item.offPrice}
      image={item.image}
    />
  );
};
class CartList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
    };
  }
  componentDidMount() {
    this.requestAPI();
  }
  requestAPI = () => {
    const apiURL = 'http://myApi/api/courses';
    fetch(apiURL)
      .then(response => response.json())
      .then(responseJson => {
        this.setState({
          data: responseJson,
        });
      });
  };

  renderItem = ({item}) => {
    return <Item item={item} />;
  };
  render() {
    return (
      <>
        <FlatList
          data={this.state.data}
          renderItem={this.renderItem}
          keyEtractor={item => item.id.toString()}
        />
      </>
    );
  }
}

我通过购物车中的道具访问图像路径。

购物车.js

const Cart = (props) => {
  return (
    <View
      <Image
        style={{
          width: '40%',
          height: 100,
        }}
        source={{uri:props.image}}
      />
    </View>
  );
};
export default Cart;

当我运行该应用程序时，我收到此错误：

我怎么解决这个问题？

标签： javascriptreactjsdatabasereact-native

Answer 1

如果您的图像路径不正确，则会发生这种情况，请检查您的图像远程路径是否正确，我认为图像路径具有误导性。