无法在本机中加载图像

Question

I got stuck with loading images in react-native. I went through all the solutions given in the similar questions posted but the answers are not helpfull in my case. I tried importing the images like how we do in react like using import or require but both the options are not working.

PFB code for your ref

import React, { Component } from 'react';
import { Card, CardTitle, CardContent, CardAction, CardButton, CardImage } from 'react-native-material-cards';
import aboutImage from "https://images.pexels.com/photos/34950/pexels-photo.jpg";
import {
  Button,
  View,
  Text,
  ScrollView, StyleSheet
} from 'react-native'

class About extends Component {

  handleScroll = e => {

  }

  render() {
    return (
      <ScrollView onScroll={this.handleScroll}>
        <View style={styles.container}>
          <Text style={styles.text}>Who we are</Text>
          <Card style={{backgroundColor: "#fff", boxShadow: "2px 3px #3333"}}>
            <CardImage 
              source={{uri:aboutImage }}
              title="About US"
            />
            <CardContent text="Testing" />
          </Card>
      </View>
    </ScrollView>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    margin: 20
  },
  text:{
    color: "#06357a",
    fontWeight: "bold",
    fontSize: 30,
    fontFamily: "FreeSans,Arimo,Droid Sans,Helvetica,Arial,sans-serif"
  },
  text1:{
    color: "#06357a",
    fontWeight: "bold",
    fontFamily: "FreeSans,Arimo,Droid Sans,Helvetica,Arial,sans-serif"
  }
});

export default About;

.babelrc

{
  "presets": ["module:metro-react-native-babel-preset"]
}

Edit

I tried downloading images to local and use require to import them but I get below error

error: bundling failed: Error: Unable to resolve module ../../../../assets/AboutUS.jpg from D:\\react-native\\AppUsingRN\\components\\Layout\\components\\About.js : The module ../../../../assets/AboutUS.jpg could not be found from D:\\react-native\\AppUsingRN\\components\\Layout\\components\\About.js . Indeed, none of these files exist:

I imported it like

   <CardImage 
          source={{uri: require('../../../../assets/AboutUS.jpg')}} 
          title="About US"
        />

I am not able to figure out the issue.

Answer 1

It should work with:

<CardImage 
  source={{ uri: "https://images.pexels.com/photos/34950/pexels-photo.jpg" }}
  title="About US"
/>

Answer 2

if use require

 const imageByRequire = require('../../../../assets/AboutUS.jpg'); <CardImage source={imageByRequire} title={'About US'} /> 

if use uri directly

 const imageByUri = "https://images.pexels.com/photos/34950/pexels-photo.jpg"; <CardImage source={imageByUri} title={'About US'} /> 

If "It's not working somehow", maybe downloading or download error(there would be nothing), perhaps you can plus defaultSource .

 const imageByUri = "https://images.pexels.com/photos/34950/pexels-photo.jpg"; const defaultImage = require('../../../../assets/AboutUS.jpg'); <CardImage defaultSource={defaultImage} source={imageByUri} title={'About US'} /> 

hope helpful :)