如何在 React Js 中为 div 提供背景图像答案

【问题标题】：How do I give a background image to a div in React Js如何在 React Js 中为 div 提供背景图像
【发布时间】：2018-04-03 12:40:43
【问题描述】：

我想在没有 const 的 div 的背景中使用图像。我需要图像是背景图像，所以我可以在上面放文字。我想避免在 sass 文件中硬编码背景图像。但是，我很好奇它是如何写在 sass 文件中的。

以下只是一张图片，不是背景图片：

class Card extends Component {

  render() {

    return (
      <div className='home-card-view flex-center'>

        <div>

          <img className='home-card-image' src="https://thumbnail.imageurlpathlsakfjlsdfj)" />

          <h2 className='home-card-title'> Title </h2>
          <h4> Subtitle stuf that should explain more </h4>
        </div>

      </div>

    )
  }
}

export default Card

我可以在 React 的 div 中获取背景图片吗？还有如何在 Sass 文件中完成。

【问题讨论】：

标签： reactjs sass background-image

【解决方案1】：

如果你有很多元素想要这样做，并且你想尽可能多地抽象到 Sass 文件中并且你可以只针对现代浏览器，你可以使用 CSS 自定义属性.

在你的 Sass 文件中：

.home-card-image{
  background-image:url( var(--homeCardImage) );
  [background-position, size, etc...]
}

然后在 React 中，您只需将自定义属性设置为您想要的任何内容：

class Card extends Component {
  render() {    
    return (
      <div className='home-card-view flex-center'
           style='--homeCardImage: "YOUR-IMAGE-URL-HERE"'>    
        <div>    
          <h2 className='home-card-title'> Title </h2>
          <h4> Subtitle stuf that should explain more </h4>
        </div>    
      </div>    
    )
  }
}    
export default Card

你为什么要这样做？好吧，如果你想让自己在未来做更多的事情，而不仅仅是一个背景图像，你可以。例如，如果您想用渐变叠加层叠加第二个背景图像，您可以在 sass 文件中执行此操作，如下所示：

.home-card-image{
  background-image:url( var(--homeCardImage) ), linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.5);
  [background-position, size, etc...]
}

而且你不需要接触 React 组件。

【讨论】：

【解决方案2】：

只需将内联样式应用于您想要拥有 background-image 属性的组件（下面的示例）

class Card extends Component {

  render() {
    const image_url = 'YOUR IMAGE URL';
    return (
      <div className='home-card-view flex-center'
           style={{ backgroundImage : `url(${image_url})` }}>

        <div>

          <img className='home-card-image' src="https://thumbnail.imageurlpathlsakfjlsdfj)" />

          <h2 className='home-card-title'> Title </h2>
          <h4> Subtitle stuf that should explain more </h4>
        </div>

      </div>

    )
  }
}

export default Card

【讨论】：