Question

我刚开始一个React本机项目，想显示图像。 urls图片来自服务器端，我想显示它们，但是图像不显示。

我将图像URL存储到变量中，然后将该变量传递给require。

    //responseJson.url = "https://localhost.com/content/img/react_thumb_install.png";
    const imgUrl = responseJson.url;
    <Image source={imgUrl} />

如何直接从服务器显示图像？

Answer 1

您需要传递如下所示的uri选项，因为它是要从URL加载的：

<Image source={{uri: imgUrl}}
       style={{width: 400, height: 400}} />

有关更多详细信息，请参见https://facebook.github.io/react-native/docs/images#network-images

Answer 2

// This is how you can display the image which is coming from Server

<Image 
     source={{uri:'https://snack.expo.io/web-player/37/static/media/react-native-logo.2e38e3ef.png'}}
      style={{ width: 40, height: 40 }}
/>


// -----------------------------------------
// This is how you can display the image which is coming from your local folder

<Image 
  source={require('../assets/images/app-logo.png')} 
  style={{ width: 40, height: 40 }}
 />

Answer 3

浏览：https://facebook.github.io/react-native/docs/images

 <Image 
     source={{uri: 'https://facebook.github.io/react/logo-og.png'}}
      style={{width: 400, height: 400}} />

传递的数据不正确，它理解javascript对象而不是您正在传递字符串变量的字符串。通过

检查

<Image 
 source={{uri: imgUrl}}
  style={{width: 400, height: 400}} />

如何在React Native上显示来自服务器的图像？

3 个答案: