如何从 JSON 中调用 React Native 中具有本地路径的图像

Question

import React, { Component } from 'react';
import {
ScrollView,
StyleSheet,
} from 'react-native';
import axios from 'axios';
import CarDetail from '../components/CarDetail';

class CarList extends Component {
state = { cars: [] };

componentDidMount() {
axios.get('https://www.website.com/ajx/home_ajx/lister')
.then(response => this.setState({ cars: response.data.data[0]['S1'] 
}));

//Add an if statement here to notify the user when the request fails
}

renderCars() {
return this.state.cars.map(model => 
  <CarDetail key={model.title} modelprop={model} /> 
);
}

render() {
console.log(this.state);

return (
  <ScrollView>
    {this.renderCars()}
  </ScrollView>
);
}  
}

export default CarList;

JSON文件中的图片路径如下：

“图片”：“数据/模型/标致-2008-138twf_600X400_.jpg”，

下面是我在另一个组件中调用图像的地方

const CarDetail = ({ modelprop }) => {
const { image } = modelprop;
return (
<Card>
<CardSection>
<View>
  <Image style={imageStyle} 
  source={{ uri: props.modelprop.image }} 
  />
</View>

我认为我可能需要在我的 Global.js 中使用某种前缀，但我无法找到或弄清楚。

非常感谢任何帮助。

Answer 1

就像您的代码有错误一样：

const CarDetail = ({ modelprop }) => {
  const { image } = modelprop;
  return (
    <View>
      <Image
       style={imageStyle} 
       source={{ uri: image }} 
      />
    </View>
  );
}

如果image 类似于data/models/peugeot-2008-138twf_600X400_.jpg，您应该使用`${Global.imageUrlPrefix}${image}` 来连接所有内容。