React Native中如何调用JSON内本地路径的图片？

我来帮你一步步搞定这两个问题：

1. Axios请求失败的错误处理 #

你可以在Axios的请求链中添加catch块来捕获请求失败的场景，同时结合React Native的Alert组件给用户友好提示。修改你的CarList组件代码如下：

首先，记得导入Alert组件：

import React, { Component } from 'react';
import { ScrollView, StyleSheet, Alert } from 'react-native'; // 新增Alert导入
import axios from 'axios';
import CarDetail from '../components/CarDetail';

然后更新componentDidMount方法：

componentDidMount() {
  axios.get('https://www.website.com/ajx/home_ajx/lister')
    .then(response => {
      this.setState({ cars: response.data.data[0]['S1'] });
    })
    .catch(error => {
      // 向用户展示错误提示
      Alert.alert('加载失败', '获取车辆数据时出错，请检查网络后重试');
      // 在控制台打印错误详情，方便调试
      console.error('请求错误信息:', error);
    });
}

这样当请求超时、网络异常或者接口返回错误状态码时，都会触发catch块，既给用户清晰提示，也方便你排查问题。

2. 配置图片路径前缀（Global.js方案） #

接口返回的图片路径是相对路径，我们需要拼接服务器的基础URL来生成完整的图片地址。通过Global.js统一管理基础URL是个高效的做法，具体步骤如下：

第一步：创建Global.js文件 #

在项目中新建一个Global.js文件（比如放在根目录或utils文件夹下），定义基础URL常量：

// Global.js
export const BASE_API_URL = 'https://www.website.com/';

第二步：在CarDetail组件中使用前缀 #

修改你的CarDetail组件，导入Global中的常量并拼接图片路径：

import React from 'react';
import { View, Image } from 'react-native';
import { Card, CardSection } from './your-components-path'; // 替换成你的组件实际路径
import { BASE_API_URL } from '../path/to/Global'; // 替换成Global.js的实际路径

const CarDetail = ({ modelprop }) => {
  const { image } = modelprop;
  // 拼接完整的图片URL
  const fullImageUrl = `${BASE_API_URL}${image}`;

  return (
    <Card>
      <CardSection>
        <View>
          <Image style={imageStyle} source={{ uri: fullImageUrl }} />
        </View>
      </CardSection>
    </Card>
  );
};

// 确保你定义了图片样式（根据需求调整）
const imageStyle = {
  width: 600,
  height: 400,
  resizeMode: 'cover'
};

export default CarDetail;

另外提醒下：你之前代码里写了props.modelprop.image，但已经通过解构获取了image变量，直接用image会更简洁哦。

这样所有图片都会自动拼接基础URL，以后如果服务器地址变更，只需要修改Global.js里的常量即可，不用逐个组件调整，非常省心。

内容的提问来源于stack exchange，提问作者Mert Alnuaimi