Question

我正在尝试在React中做一些非常基础的事情，但是遇到了麻烦。我想将图像设置为网站的全窗口背景。

使用CSS样式，我设法使图像显示出来。但是我在将图像设置为全窗口背景时遇到了麻烦。所以我尝试了React样式。

import React, { Component } from "react";
import logo from "./logo.svg";
import code from "./code.jpg";
import "./App.css";

function App() {
  var styles = StyleSheet.create({
    bgImage: {
      flex: 1,
      flexDirection: "row",
      justifyContent: "center",
      alignItems: "stretch",
      resizeMode: "stretch"
    }
  });
  return (
    <React.Fragment>
      <Image
        source={require("image!background")}
        style={styles.bgImage}
        alt="background"
      >
        pizza
      </Image>
    </React.Fragment>
  );
}

export default App;

我对React很陌生。感谢任何可以帮助我了解正在发生的事情的人！

Answer 1

  <Image
    source={require("image!background")}
    style={styles.bgImage}
     width="100%"
    alt="background"
  >

编辑：

是的，您实际上没有定义<Image />，它来自哪里？

您是要使用html <img />元素吗？所有大写元素都是特定于反应的，并且不能全局注册，因此无论您在应用程序中定义的哪个位置，都必须在此处导入<Image />组件。

第二个错误也有效。您要使用的语法是什么 “图片！背景”

据我所知，这是无效的语法。 “！”通常表示条件中的“不是”。例如

2 !== 3

或

2 is not equal to 3

Answer 2

您可以使用此CSS

var styles = StyleSheet.create({
    bgImage: {
      backgroundRepeat:'no-repeat',
      backgroundSize:'cover',
      height:'100%',
      backgroundPosition:'bottom' 
    }
  });

如何使用React样式设置全窗口背景图像

2 个答案: