Javascript 在ReactJS中以GIF作为背景

我试图在我的react js应用程序中设置一个GIF背景图像，但我尝试了不同的方法，其中任何一种似乎都有效。有什么建议吗

这是我的完整代码我的问题最严重的是在创建背景图像的第一行（backgroundH）

从“React”导入React；
导入“../../src/App.css”；
导入“/Home.css”；
从“./Images/SyncLink Home v.4.gif”导入背景；
从“react bootstrap”导入{Button}；
从“react router dom”导入{Link}；
函数Home（）{
返回(

登录


注册


帮助

);
}
导出默认主页；

此处的问题可能是由于gif路径中的空间造成的。渲染名称中包含空格的图像时会遇到问题。因此，您必须对其进行编码，以便能够正确渲染

函数的作用是：对URI进行编码

此函数编码特殊字符，除了：，/？：@&=+$#（使用>encodeURIComponent（）对这些字符进行编码）

更多细节可以找到

通过使用encodeURI（）函数，路径”。/Images/SyncLink Home v.4.gif“变为”。/Images/SyncLink%20Home%20v.4.gif“

---

如果上述方法不起作用，则需要检查gif路径是否中断

此问题与react无关-可能gif路径中断（检查页面）。

import React from "react";
import "../../src/App.css";
import "./Home.css";
import backgroundH from "../Images/SyncLink Home v.4.gif";
import { Button } from "react-bootstrap";
import { Link } from "react-router-dom";

function Home() {
  return (
    <div
      class="bk_Img"
      style={{
        backgroundImage: "url(" + backgroundH + ")",
        backgroundSize: "cover",
        height: "100vh",
      }}
    >
      <ol className="homeButtons">
        <Link to="/LogIn" style={{ textDecoration: "none", color: "white" }}>
          <li>
            <Button className="btn--secondary" variant="primary">
              LOG IN
            </Button>
          </li>
        </Link>
        <Link to="/SignUp" style={{ textDecoration: "none", color: "white" }}>
          <li>
            <Button className="btn--secondary" variant="primary">
              SIGN UP
            </Button>
          </li>
        </Link>
        <Link
          to="/ContactUs"
          style={{ textDecoration: "none", color: "white" }}
        >
          <li>
            <Button className="btn--secondary" variant="primary">
              HELP
            </Button>
          </li>
        </Link>
      </ol>
    </div>
  );
}

export default Home;