如何更改 jsx 文件的背景图像答案

【问题标题】：how can i change the background image of a jsx file如何更改 jsx 文件的背景图像
【发布时间】：2022-01-01 09:27:45
【问题描述】：

所以我正在使用一个组件，我希望在组件 home.jsx 中有一个背景图像，然后当我登录页面时，我使用另一个名为 home_logged.jsx 的组件，我不想要背景图像但是但是文件一直互相感染

这是 home.css 的 css


body
{
    background-color:#EFEFEF ;
    background-image:url("../../images/dog.jpeg");
    background-size:cover ;
    background-repeat: no-repeat;
    background-position: 20px 15px;
    height: 610px;
}
.head-div
{
    margin-top:9rem;
}
h1
{
    font-size: 50px;
    padding-left: 80px;
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif ;
    color: rgb(141, 82, 15);
}
p
{
    line-height: 19px;
    padding-left: 80px;
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif ;
    color:#ffca2c;   
}
.btn-warning
{
    margin-top:20px;
    margin-left: 80px;
    color:blanchedalmond;
    font-weight: bold;
    box-shadow: 5px 3px 10px #363631;
    padding-left: 25px;
    padding-right: 25px;
    border-radius: 44px; 
}

这是我的 home_logged.css

body
{
    background-color:#EDEDED ;
    background-image: none;
}
#row_home_logged
{
    margin-top: 7rem;
}
#doggy
{
    background-image:url("../../images/doggy.png");
    background-color: #8ACAD9;
    background-size: 329px ;
    background-repeat: no-repeat;
}
#catty
{
    background-image:url("../../images/catty.png");
    background-color:#F8B8B8;
    background-size: 300px ;
    background-repeat: no-repeat;
}
#mixed
{
    background-image:url("../../images/mix.png");
    background-color:#F8C808;
    background-size: 225px ;
    background-position-x: 20px;
    background-repeat: no-repeat;
}
.dogh3
{
    padding-left: 300px;
    margin-top: 220px;
    color:rgb(39, 39, 39)
}
.link1
{
    padding-left : 300px;
    text-decoration:none;
    color: aliceblue;
    display: block;
    padding-bottom: 0px;
    font-size: 20px;
}
._link1
{
    display: block;
    padding-left : 300px;
    color: aliceblue;
    margin-bottom: 38px;
    line-height: 0px;
}
.mixh3
{
    padding-left: 236px;
    margin-top: 220px;
    color:rgb(39, 39, 39)
}
.mix1
{
    padding-left: 236px;
    text-decoration:none;
    color: aliceblue;
    display: block;
    padding-bottom: 0px;
    font-size: 20px;
}
._mix1
{
    display: block;
    padding-left: 236px;
    color: aliceblue;
    margin-bottom: 38px;
    line-height: 0px;    
}

所以我需要知道如何将它们分开

【问题讨论】：

标签： javascript css reactjs

【解决方案1】：

您可以在自己的 JSX 文件中维护图像状态，并使用 data-* 将其与 css 文件共享。

我已经分享了一个关于如何使用 javascript 传递图像背景图像的小示例。

var list = document.querySelectorAll("div[data-image]");

for (var i = 0; i < list.length; i++) {
  var url = list[i].getAttribute('data-image');
  list[i].style.backgroundImage="url('" + url + "')";
}

div[data-image] {
  width: 100px; height: 100px; /* If needed */
  border: 2px solid black;
}

&lt;div data-image="https://images.unsplash.com/photo-1638913972776-873fc7af3fdf?auto=format&amp;fit=crop&amp;w=100&amp;q=100"&gt;&lt;/div&gt;

【讨论】：

【解决方案2】：

尝试将背景样式放在它在我身边工作的 html 样式参数中

【讨论】：