GIF 作为 ReactJS 中的背景答案

【问题标题】：GIF as background in ReactJSGIF 作为 ReactJS 中的背景
【发布时间】：2021-02-02 22:23:44
【问题描述】：

我正在尝试在我的 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;

【问题讨论】：

这个问题，与 react 无关——可能 gif 路径已损坏（检查您的页面）。

标签： javascript css reactjs visual-studio frontend

【解决方案1】：

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

encodeURI() 函数用于对 URI 进行编码。

这个函数对特殊字符进行编码，除了： , / ? : @ & = + $ # （使用 > encodeURIComponent() 对这些字符进行编码）。

更多详情可以查看here

通过使用 encodeURI() 函数，路径 "../Images/SyncLink Home v.4.gif" 变为 "../Images/SyncLink%20Home%20v。 4.gif"

如果上面的方法都不起作用，那么你需要检查一下gif路径是否坏了

【讨论】：