Настройка фонового изображения в React

Question

Я хочу, чтобы изображение вело себя так, как если бы оно было задано как background-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, но я хочу, чтобы он был применен к элементу, который находится в коде .jsx элемента " thisIsMyImage ", и все еще имеет такое же поведение, как в коде css.

Любые предложения приветствуются, спасибо.

Answer 1

Почему вы используете src и background в теге img вместе? Странно использовать тег 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, если вы собираетесь использовать background & background-related-properties.

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

Answer 2

Вы можете импортировать 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>

Answer 3

Вам нужно импортировать файл css в компонент реакции следующим образом:

 // 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; 
 }

В компоненте реакции импортируйте файл CSS:

import from './styles.css'

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