css 使用React更改身体背景图像

ecbunoof 于 2023-02-17 发布在 React

关注(0)|答案(3)|浏览(174)

因此，我尝试创建一个React应用程序来更改主体的背景图像。我通过在index.html中为主体指定一个id "body"来实现这一点。我可以很好地更改背景颜色。但是，当我尝试重新分配背景图像时，无论我尝试什么，似乎都无法让它工作。
这是可行的：

document.getElementById("body").style.backgroundColor = "blue";

这不会：

import explosion from "./explosion.png";

function Boom(){
document.getElementById("body").style.backgroundImage = "url('" + {explosion} +
"')";

为什么？我试过很多种写法。

css

来源：https://stackoverflow.com/questions/75467539/changing-body-background-image-with-react

3条答案

按热度按时间

jucafojl1#

这对我很有效：

import { useEffect } from "react";
import img from './img.png';

export default function App(){

    useEffect(()=>{
        document.getElementById('body').style.backgroundImage = `url('${img}')`;
    })
    return <>
    <div id="body"
    style={{height:'300px'}}
    >

    </div>
    </>

}

或者你可以使用内联css样式：

import img from './img.png';

export default function App(){
    return <>
    <div id="body"
    style={{
        height:'300px',
        backgroundImage: `url('${img}')`,
    }}
    >

    </div>
    </>

}

赞(0）回复(0）举报 2023-02-17

ego6inou2#

您需要将图像的URL作为字符串传递，而不用花括号{}将其括起来

赞(0）回复(0）举报 2023-02-17

qni6mghb3#

你可以试试这个代码

import { useEffect } from "react";

export default function App() {
  const bgUrl =
    "https://images.unsplash.com/photo-1605106250963-ffda6d2a4b32?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=880&q=80";

  /*useEffect Hook allows you to perform side effects in your components. Such as fetching data, directly updating the DOM, and timers*/
  useEffect(() => {
    Boom();
  }, []);

  const Boom = () => {
    document.getElementById("body").style.backgroundImage = `url(${bgUrl})`;
  };

  return (
    <div className="App">
      <h1>Hello World!</h1>
    </div>
  );
}

这里有一个到Change Background Image工作演示的链接

赞(0）回复(0）举报 2023-02-17

我来回答

css 使用React更改身体背景图像

3条答案

相关问题

热门标签

最新问答