时间戳

首页 > 解决方案 > 将静态图像快速提供给 React-native 应用程序

node.js - 将静态图像快速提供给 React-native 应用程序

问题描述

我正在尝试将来自 node js express 的静态图像提供给我的 react 本机应用程序。

我正在尝试使用 express.static 但出现错误

失败的道具类型：提供给图像的道具来源无效。

如何将静态图像提供给 react-native 应用程序？

文件夹结构：

--public
-image.png
-app.js

应用程序.js

const app = express();

app.use(express.static('/public'));

app.get('/', (req, res) => res.status(200).send({
  message: 'API Called',
}));

module.exports = app;

主页.js

import React, {Component} from 'react';
import {AppRegistry, Text, View, TextInput, Button, StyleSheet, Image, } from 'react-native';

export default class HomePage extends Component{

  constructor(){
    super();

  render(){
    return(
      <View style={styles.ViewStyle}>
        <Image
          style={styles.Image}
          //{uri: this.getImage(item.teampicture1)}
          source={{uri: 'http://192.168.1.10:8000/image.png'}}
        /> 

      </View>
    );
  }
}

标签： node.jsimagereactjsexpressreact-native

解决方案

我发现我必须使用

app.use('/image', express.static(__dirname + '/public'));

在 app.js 中。

然后为了显示图像，我必须使用公共文件夹中的图像名称调用图像路由。

source={{uri: 'http://192.168.1.10:8000/image/image.png'}}

推荐阅读