我正在尝试在此处添加图像，但是当我使用 this.props.imageUri 时。我得到一个空白图像..找不到解决方案答案

【问题标题】：I am trying to add images in here but the moment I use this.props.imageUri. I get a blank image.. Couldn't find a solution我正在尝试在此处添加图像，但是当我使用 this.props.imageUri 时。我得到一个空白图像..找不到解决方案
【发布时间】：2021-12-22 08:45:51
【问题描述】：

我正在尝试将图像添加到我的应用程序主页，但似乎每当我使用 this.props.imageUri 时它就不再显示图像了。我尝试使用图像源来做到这一点.. 它可以工作，但是当我创建 Location.js 并添加 this.props.imageUrl 时，图像不再显示.. 所以我不知道该怎么做。

这是我的 Home.js 文件

 import React from "react";
import {
  View,
  Text,
  Button,
  SafeAreaView,
  TextInput,
  StatusBar,
  Platform,
  ScrollView,
  Image,
  imageUri,
  StyleSheet,
} from "react-native";
import ProductsList from "../../components/productsList/ProductsList";
import { styles } from "../../styles/authStyle";
import Icon from "react-native-vector-icons/Ionicons";
import { fontSize } from "styled-system";
import Location from "../components/Location";

export default function Search({ navigation }) {
  return (
    <SafeAreaView style={{ flex: 1 }}>
      <View style={{ flex: 1 }}>
        <View
          style={{
            height: 80,
            backgroundColor: "white",
            borderBottomWidth: 1,
            borderBottomColor: "#dddddd",
          }}
        >
          <View
            style={{
              flexDirection: "row",
              padding: 10,
              backgroundColor: "white",
              marginHorizontal: 20,
              shadowOffset: { width: 0, height: 0 },
              shadowColor: "black",
              shadowOpacity: 0.2,
              borderRadius: 50,
              elevation: 1,
            }}
          >
            <Icon name="ios-search" size={20} style={{ marginRight: 10 }} />
            <TextInput
              underlineColorAndroid="transparent"
              placeholder="City, airport, adrerss, or hotel"
              placeholderTextColor="grey"
              style={{ flex: 1, fontWeight: "700", backgroundColor: "white" }}
            />
          </View>
        </View>
        <ScrollView scrollEventThrottle={16}>
          <View style={{ flex: 1, backgroundColor: "white", paddingTop: 20 }}>
            <Text
              style={{
                fontSize: 24,
                fontWeight: "700",
                paddingHorizontal: 20,
                marginLeft: 100,
              }}
            >
              FIND YOUR RIDE
            </Text>
            <View style={{ height: 130, marginTop: 20 }}>
              <ScrollView>
                <Location
                  imageUri={require("../home/nicosia.png")}
                  name="nicosia"
                />
              </ScrollView>
            </View>
          </View>
        </ScrollView>
      </View>
    </SafeAreaView>
  );

  const styles = StyleSheet.create({
    container: {
      flex: 1,
      alignItems: "center",
      justifyContent: "center",
    },
  });
}

这是 Location.js

import React, { Component } from "react";
import { View, Text, StyleSheet, Image, imageUri } from "react-native";

class Location extends Component {
  render() {
    return (
      <View
        style={{
          alignItems: "center",
          height: 130,
          width: 130,
          marginLeft: 20,
          borderWidth: 0.5,
          borderColor: "#dddddd",
        }}
      >
        <View style={{ flex: 2 }}>
          <Image
            source={this.props.imageUri}
            style={{
              flex: 1,
              width: null,
              height: null,
              resizeMode: "cover",
            }}
          />
        </View>
        <View style={{ flex: 1, paddingLeft: 3, paddingTop: 10 }}>
          <Text>{this.props.name}</Text>
        </View>
      </View>
    );
  }
}
export default Location;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
  },
});

【问题讨论】：

使用require()获取"../home/nicosia.png"会返回什么？看起来图像源可能需要是格式化为字符串的路径，我不确定require() 是否会返回它。您甚至可能会发现完全删除 require() 会更好。
感谢您的回复.. 但是我怎样才能一起删除 require .. 如果我将它们全部删除，我将只有 imageUri=("../home/nicosia.png")这给了我一个错误..当我使用 require("../home/nicosia.png") 它只是给了我一个空白图像.. 我该怎么办？

标签： javascript css reactjs react-native

【解决方案1】：

将宽度和高度设置为固定大小或忽略它们。

<View style={{ flex: 2 }}>
  <Image
    source={this.props.imageUri}
    style={{
      flex: 1,
      {/* Don't set width and height to null */}
      width: null,
      height: null,
      resizeMode: "cover",
    }}
  />
</View>
<View style={{ flex: 1, paddingLeft: 3, paddingTop: 10 }}>
  <Text>{this.props.name}</Text>
</View>

【讨论】：

成功了！！！非常感谢