GIF作为ReactJS中的背景

如何解决GIF作为ReactJS中的背景

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

这是我完整的代码，这是我在创建背景图片（backgroundH）的第一行中遇到的最多问题

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;

解决方法

此处的问题可能是由于gif路径中的空格所致。您遇到的问题是渲染名称中包含空格的图像。因此，您必须对其进行编码，以便可以正确呈现它。

encodeURI（）函数用于对URI进行编码。

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

更多详细信息，请here

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

如果上述方法无效，则需要检查gif路径是否损坏