React Native传递图片Props遇问题，请求代码异常排查

问题分析 #

1. 动态require报错的原因 #

React Native中使用require()加载本地资源时，路径必须是静态字符串，打包工具在构建阶段会提前扫描并打包所有通过require引用的资源，不支持动态拼接路径。你用require(.. + props.image.substring(9))这种动态生成的路径，打包工具无法识别，自然会报Cannot find module错误。

2. URI方式图片不显示的原因 #

你使用的../public/images/xxx.jpeg是后端项目的本地文件路径，React Native客户端无法直接访问后端服务器的本地文件系统；同时React Native默认不会识别项目中的public目录作为资源目录，这种相对路径对客户端来说是无效的，所以图片无法加载。

解决方案 #

方案一：后端返回完整可访问的图片URL #

最直接的解决方式是修改后端接口，让photoLocation返回图片的完整HTTP访问地址，例如：

"photoLocation":"http://192.168.8.103:8080/images/1685958934714.jpeg"

前端直接使用该URL加载图片：

const ShoeDisplay = (props) => {
  return(
    <View style={styles.container}>
      <Image style={styles.image} source={{uri: props.image}}/>
      <Text style={styles.brand} id="brand">{props.brand}</Text>
      <Text style={styles.name} id="display-title">{props.name}</Text>
      <Text style={styles.price} id="price">€{props.price}</Text> 
    </View>
  )
}

方案二：前端拼接完整URL（适配现有后端返回格式） #

如果无法修改后端，可在前端将后端返回的本地路径拼接为可访问的服务器URL：

const ShoeDisplay = (props) => {
  // 去掉"../client/public"部分，拼接服务器地址
  const imageUrl = `http://192.168.8.103:8080${props.image.substring(13)}`;
  return(
    <View style={styles.container}>
      <Image style={styles.image} source={{uri: imageUrl}}/>
      <Text style={styles.brand} id="brand">{props.brand}</Text>
      <Text style={styles.name} id="display-title">{props.name}</Text>
      <Text style={styles.price} id="price">€{props.price}</Text> 
    </View>
  )
}

注：需确保后端已配置静态文件服务，允许通过/images路径访问对应的图片文件。

额外注意事项 #

• 检查Image组件的样式是否设置了明确的宽高，否则图片可能因尺寸为0而无法显示：

  const styles = StyleSheet.create({
    image: {
      width: 120,
      height: 120,
      // 其他样式
    }
  });
  

• 若图片是打包在APP内的本地资源，只能使用静态require，无法动态加载（除非提前维护图片路径映射表）。

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