在 React 中设置背景图像答案

【问题标题】：Setting Background-Image in React在 React 中设置背景图像
【发布时间】：2019-08-11 04:55:23
【问题描述】：

我希望图像的行为就像它被设置为背景 URL 一样，并且功能如下：

img.thisIsMyImage {
 background: url("../../services/images/hehe.jpg") no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover; 

animation: increase 60s linear 10ms infinite;
-webkit-transition: all 5.2s ease-in-out;
-moz-transition: all 5.2s ease-in-out;
-ms-transition: all 5.2s ease-in-out;
-o-transition: all 5.2s ease-in-out;
transition: all 5.2s ease-in-out;

}

这是反应代码

 render() {
    return (
    <div>
        <img src={rsm_logo} className="thisIsMyImage" alt="containerLogo" />
        <LoginForm submit={this.submit} />
    </div>
    )
}

当像上面 CSS 中的代码一样完成时，这工作得非常好，但我希望它应用于元素“thisIsMyImage”上的 .jsx 代码中的元素，并且仍然有与 css 代码中的行为相同。

非常感谢任何建议，谢谢。

【问题讨论】：

标签： reactjs css jsx

【解决方案1】：

BackgroundImage.js

import './YourFileName.css'
import Image from '../path/path/path/image.jpeg'

export const BackgroundImage = () => {
    return (
      <>
        <img className="backgroundImage" src={Image} alt={"Error"} />
      </>
    )
}

YourFileName.css

.backgroundImage {
    width: 100%;
    height: 100vh;
}

【讨论】：

【解决方案2】：

你需要像这样将 css 文件导入到 react 组件中：

 // remove "img" from class in css
 img.thisIsMyImage {
     background: url("../../services/images/hehe.jpg") no-repeat center center fixed; 
  }

 // like this:
 .thisIsMyImage {
   background: url("../../services/images/hehe.jpg") no-repeat center center fixed; 
 }

在 react 组件中导入你的 css 文件：

import from './styles.css'

<img src={rsm_logo} className="thisIsMyImage" alt="containerLogo" />

【讨论】：

【解决方案3】：

为什么在img标签中同时使用src和background？在这里使用 img 标签很奇怪。 Img src 将优先。您可能必须提供合适的宽度和高度才能显示图像。

我附上了一个带有 div 和 img 标签的示例。

.thisIsMyImage {
    background: url("https://via.placeholder.com/150") no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover; 
    animation: increase 60s linear 10ms infinite;
    -webkit-transition: all 5.2s ease-in-out;
    -moz-transition: all 5.2s ease-in-out;
    -ms-transition: all 5.2s ease-in-out;
    -o-transition: all 5.2s ease-in-out;
    transition: all 5.2s ease-in-out;
    width:150px;
    height:150px;
}

<div class="thisIsMyImage" title="containerImage"></div>

<img src="https://via.placeholder.com/150" class="thisIsMyImage" title="containerImage" />

在主文件中导入css，避免多次导入。

import from './styles.css'

如果你要使用背景和背景相关的属性，我建议在渲染功能中使用 div 而不是 img 标签。

render() {
  return (
    <div>
      <div className="thisIsMyImage" title="containerLogo" />
      <LoginForm submit={this.submit} />
    </div>
  )
}

【讨论】：

【解决方案4】：

你可以导入css并设置类

class Hello extends React.Component {
  render() {
    return (
    	<div>
      	Hello {this.props.name}
        
        <div className='imgStyle' />
      </div>
		);
  }
}

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);

.imgStyle {
  background: url("https://placekitten.com/600/200") no-repeat center center fixed; 
  
  width: 600px;
  height: 300px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="container">
</div>

【讨论】：