我想为此页面渲染一个背景图像，不是整个应用程序

Question

这是我的登录页面代码，但我无法为此页面设置BG映像，我可以通过将其设置为应用程序组件，如果我对此进行相同的操作，则将其设置为整个应用程序我通过导入图像来完成的整个页面

import React, { useState } from "react";
import "./Loginp.css";
import axios from "axios";

import bgimg from "../../assets/Loginimage.jpg";

function Loginp() {
  const [usernamed, setusername] = useState("");
  const [passwordd, setpassword] = useState("");

  const check = false;

  function clicki() {
    console.log("clicked");
    const dat = {
      username: usernamed,
      password: passwordd,
    };
    axios.post("http://localhost:7000/login", dat).then((resp) => {
      check = resp.data;
    });
    if (check) {
      alert("User name already exists");
    }
  }
  return (
    <div
      id="loginform"
      style={{
        backgroundImage: bgimg,
        height: 100,
        marginTop: 10,
        textAlign: "center",
      }}
    >
      <FormHeader title="Login" />
      {/* <Form /> */}
      <div>
        <div class="row">
          <label>Username</label>
          <input
            type="text"
            placeholder="Enter your username"
            onChange={(e) => {
              setusername(e.target.value);
            }}
          />
        </div>

        <div class="row">
          <label>Password</label>
          <input
            type="text"
            placeholder="Enter your password"
            onChange={(e) => {
              setpassword(e.target.value);
            }}
          />
        </div>
        <div id="button" class="row">
          <button onClick={clicki}>Log in</button>
        </div>
      </div>
    </div>
  );
}

const FormHeader = (props) => <h2 id="headerTitle">{props.title}</h2>;

export default Loginp;

Answer 1

import React from 'react';
import backgroundImage from './your-image-path.jpg';

function YourComponent() {
  const style = {
    backgroundImage: `url(${backgroundImage})`,
    backgroundRepeat: 'no-repeat',
    backgroundSize: 'cover',
  };

  return (
    <div style={style}>
      {/* your page content goes here */}
    </div>
  );
}

export default YourComponent;

Answer 2

尝试一下。

背景图：url（$ {bgimg}）