Express.js后端返回JSON实现本地动态图片展示，手机端无法显示求排查

核心错误原因 #

1. 后端返回的是字符串形式的require('./uploads/xxx')，前端无法将这个字符串解析为有效的图片资源引用，React Native的Image组件不识别这种格式。
2. 手机端无法直接访问后端服务器的本地文件路径，必须通过HTTP请求获取图片资源。

修复步骤 #

1. 修改后端代码：返回图片的完整可访问URL #

首先需要将uploads文件夹设置为静态资源目录，让前端能通过HTTP访问其中的图片；然后构造每个图片的完整访问URL返回给前端。

修改后的后端代码：

// 先添加静态资源路由，让uploads文件夹可通过HTTP访问
app.use('/uploads', express.static('uploads'));

app.post('/jenisbudayabatak', (req, res) => {
  const info = `SELECT id_jenis, nm_jenis, gambar FROM jenisbudaya`;
  con.query(info, function(err, result){
    if(err){
      return res.status(500).send({
        message: "Terjadi kesalahan, coba lagi nanti"
      });
    }
    // 用map简化数组处理，构造完整图片URL
    const final = result.map(item => ({
      id_jenis: item.id_jenis,
      nm_jenis: item.nm_jenis,
      gambar: `http://192.168.207.161:3000/uploads/${item.gambar}`
    }));
    res.status(200).send({
      data: final
    });
  });
});

2. 修改前端图片渲染代码 #

React Native的Image组件加载远程图片时，source属性需要传入{uri: 图片URL}的格式，而不是直接传入字符串。

修改后的渲染代码：

<TouchableOpacity style={styles.card} onPress={() => {this.clickEventListener(item)}}>
  <Image style={styles.cardImage} source={{uri: item.gambar}}/>
</TouchableOpacity>

额外注意事项 #

• 确保手机和后端服务器处于同一局域网内，且服务器IP地址（192.168.207.161）在手机端可访问。
• 检查数据库中存储的图片文件名与uploads文件夹中的实际文件名完全一致（包括大小写）。
• 确认后端服务器的3000端口未被防火墙拦截。

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