首页 文章

无法以react-native加载图像

提问于
浏览 次
1

我厌倦了在react-native中加载图像 . 我查看了所发布的类似问题中提供的所有解决方案，但答案在我的案例中没有帮助 . 我尝试导入图像，就像我们做的反应一样，如使用import或require，但两个选项都不起作用 .

您的参考号的PFB代码

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"]
}

编辑

我尝试将图像下载到本地并使用require导入它们但我得到以下错误

错误：捆绑失败：错误：无法解析模块../../../../assets/AboutUS.jpg来自D：\ react-native \ AppUsingRN \ components \ Layout \ components \ About.js：The无法从D：\ react-native \ AppUsingRN \ components \ Layout \ components \ About.js找到模块../../../../assets/AboutUS.jpg . 实际上，这些文件都不存在：

我像进口它一样

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

我无法弄清楚这个问题 .

javascript reactjs react-native

2 回答

  • 1

    它应该与：

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

    如果使用 require

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

    如果直接使用 uri

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

    如果"It's not working somehow"，也许下载或下载错误（没有什么），也许你可以加 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'}
/>

    希望有帮助:)

    回复于

相关问题