英文:
Changing body background image with React
问题
这有效：
document.getElementById("body").style.backgroundColor = "blue";
这不起作用：
import explosion from "./explosion.png";
function Boom() {
document.getElementById("body").style.backgroundImage = "url('" + explosion + "')";
为什么？我尝试以多种不同的方式编写它。
英文:
So, I'm trying to create a React App that changes the background image of the body. I did this by giving the body in my index.html an id of "body." I can get this to work with changing the background COLOR just fine. When I try to reassign the background IMAGE, though, I can't seem to get it to work no matter what I try.
This works:
document.getElementById("body").style.backgroundColor = "blue";
This doesn't:
import explosion from "./explosion.png";
function Boom(){
document.getElementById("body").style.backgroundImage = "url('" + {explosion} +
"')";
Why? I've tried writing this many different ways.
答案1
得分: 1
这段代码中的中文注释已经被翻译成英文，以下是已经翻译好的部分：
this worked for me :
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>
</>
}
or you can use inline css style :
import img from './img.png';
export default function App(){
return <>
<div id="body"
style={{
height:'300px',
backgroundImage: `url('${img}')`,
}}
>
</div>
</>
}
英文:
this worked for me :
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>
</>
}
or you can use inline css style :
import img from './img.png';
export default function App(){
return <>
<div id="body"
style={{
height:'300px',
backgroundImage: `url('${img}')`,
}}
>
</div>
</>
}
答案2
得分: 0
你需要将图像的URL作为字符串传递，不要用花括号 {} 包裹。
英文:
you need to pass the URL of the image as a string, without wrapping it in curly braces {}
答案3
得分: 0
您可以尝试这段代码
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允许您在组件中执行副作用。比如获取数据、直接更新DOM和定时器 */
useEffect(() => {
Boom();
}, []);
const Boom = () => {
document.getElementById("body").style.backgroundImage = `url(${bgUrl})`;
};
return (
<div className="App">
<h1>Hello World!</h1>
</div>
);
}
这里是一个可以工作的演示链接 [Change Background Image][1]
[1]: https://codesandbox.io/s/change-background-image-2c66d8?file=/src/App.js:35-57
英文:
You can try this code
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>
);
}
here's a link to the working demo Change Background Image
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论