使用 React 内联样式设置 backgroundImage答案

【问题标题】：Setting a backgroundImage With React Inline Styles使用 React 内联样式设置 backgroundImage
【发布时间】：2021-05-18 19:06:24
【问题描述】：

我正在尝试访问要在 React 内的内联 backgroundImage 属性中使用的静态图像。不幸的是，我已经不知道如何做到这一点了。

一般来说，我以为你只是做了如下：

import Background from '../images/background_image.png';

var sectionStyle = {
  width: "100%",
  height: "400px",
  backgroundImage: "url(" + { Background } + ")"
};

class Section extends Component {
  render() {
    return (
      <section style={ sectionStyle }>
      </section>
    );
  }
}

这适用于<img> 标签。谁能解释一下两者的区别？

例子：

<img src={ Background } /> 工作正常。

谢谢！

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

backgroundImage 属性中的花括号是错误的。

可能你正在使用 webpack 和图像文件加载器，所以 Background 应该已经是一个字符串： backgroundImage: "url(" + Background + ")"

你也可以使用下面的 ES6 字符串模板来达到同样的效果：

backgroundImage: `url(${Background})`

【讨论】：

我应该将其添加到我的问题中。我确实设置了宽度和高度（分别为 100% / 400px）。出现的问题是由于我认为 react 如何处理静态图像。
是否应该在按照w3.org/TR/CSS2/syndata.html#value-def-uri 连接之前转义背景变量中的 '(", ')' 和空白字符？
完整语法应如下所示：style={{backgroundImage: "url(" + Background + ")"}}
只是为了扩展@mike的评论，你需要双花括号，因为一个是React进入JS模式，一个是表示新对象。
在从 './background.jpg' 提供此导入背景后，我收到错误 'Section' is defined but never used'； var sectionStyle = { 宽度：“100%”，高度：“400px”，背景图片：url(${Background}) };类 Section 扩展 Component { render() { return (
); } }

【解决方案2】：

您还可以使用require() 函数将图像带入组件中。

注意两组大括号。第一组用于进入反应模式，第二组用于表示对象

【讨论】：

如果图片路径是网址而不是本地路径怎么办？类似https://images.com/myimage.png
好的，我明白了，当使用基于 Web 的 URL 时。我应该写url(https://images.com/myimage.png)

【解决方案3】：

如果你使用的是 ES5 -

backgroundImage: "url(" + Background + ")"

如果你使用的是 ES6 -

backgroundImage: `url(${Background})`

在为 backgroundImage 属性添加值的同时删除不必要的大括号会起作用。

【讨论】：

在 ES6 中对我来说是 backgroundImage: `url("${Background}")`，因为你的 ES6 示例对我不起作用。
你好巴拉德，如果你想添加多个背景图片，你会怎么做。说两张图片，你会怎么做？谢谢
@S.. 谢谢，这对我有帮助。我被卡住了。

【解决方案4】：

内联样式设置任意图片全屏：

style={{  
  backgroundImage: "url(" + "https://images.pexels.com/photos/34153/pexels-photo.jpg?auto=compress&cs=tinysrgb&h=350" + ")",
  backgroundPosition: 'center',
  backgroundSize: 'cover',
  backgroundRepeat: 'no-repeat'
}}

【讨论】：

非常感谢，这就是我要找的东西
从'../images/background_image.png'导入背景；其次这里的答案确实解决了我的问题，一起是目前最好的答案。

【解决方案5】：

您可以改用模板文字（用反引号括起来：`...`）。对于像这样的backgroundImage 属性：

backgroundImage: `url(${Background})`

【讨论】：

【解决方案6】：

你可以试试usimg

backgroundImage: url(process.env.PUBLIC_URL + "/      assets/image_location")

【讨论】：

不推荐这样做，因为它会阻止 webpack 知道资产。如果 react 应用离线打开，这将以缓存未命中结束。

【解决方案7】：

试试这个：

style={{ backgroundImage: `url(require("path/image.ext"))` }}

【讨论】：

【解决方案8】：

对我来说，有这样的效果是可行的

style={{ backgroundImage: `url(${require("./resources/img/banners/3.jpg")})` }}

【讨论】：

【解决方案9】：

试试这个对我有用

backgroundImage: `url("${Background}")`

【讨论】：

【解决方案10】：

只需添加所需的文件或网址

<div style={
   {
      backgroundImage: `url(${require("./path_local")})`,      
   }
}
>

或者在css中设置base64图片之类的

div {
  background:
    url('data:image/gif;base64,R0lGODlhZQBhAPcAACQgDxMFABsHABYJABsLA')
    no-repeat
    left center;
}

您可以使用https://www.base64-image.de/ 进行转换

【讨论】：

【解决方案11】：

它对我有用：

  import Background from '../images/background_image.png';
    
  <div className=...
       style={{
              background: `url(${Background})`,
            }}
    >...</div>

【讨论】：

【解决方案12】：

将图像复制到 React 组件的文件夹中您想要查看的位置。
复制以下代码：

<div className="welcomer" style={{ backgroundImage: url(${myImage}) }}></div>

使用 CSS 为您的 .welcomer 指定高度，以便您可以看到所需大小的图片。

【讨论】：

【解决方案13】：

对于 ReactJS 的 local 文件。试试

import Image from "../../assets/image.jpg";

<div
style={{ backgroundImage: 'url(' + Image + ')', backgroundSize: 'auto' }}
>Hello
</div>

这是带有内联样式的ReactJS 的情况，其中Image 是您必须使用路径导入的本地文件。

【讨论】：

属性为jsx中的backgroundImage和backgroundSize

【解决方案14】：

您可以通过在整个网址上添加反引号来尝试此操作

style={{backgroundImage:url(${val.image || 'http://max-themes.net/demos/grandtour/upload/Tokyo_Dollarphotoclub_72848283-copy-700x466.jpg'} ) }}

【讨论】：

【解决方案15】：

有时你的 SVG 会被 React 内联，所以你需要在它周围加上引号：

     backgroundImage: `url("${Background}")`

否则它是无效的 CSS 并且浏览器开发工具根本不会显示您已设置背景图像。

【讨论】：

【解决方案16】：

import React, { PureComponent } from 'react'
import logo from './logo.png';

class Home extends PureComponent {
    render() {
        return (
            <div>
                 <div
                    style={{
                        backgroundImage: `url("https://www.nicesnippets.com/image/imgpsh_fullsize.png")`, backgroundRepeat: 'no-repeat', width: '800px', height: '250px', color: 'blue'
                    }}>
                        Nice Snippets
                </div>
                    <hr />
                    <div
                        style={{
                            backgroundImage: `url(${logo})`, backgroundRepeat: 'no-repeat', width: '100%', height: '250px', color: 'blue'
                        }}>
                        Nice Snippets
                </div>
            </div>
        )
    }
}

export default Home

【讨论】：

背景图片：url("https://www.nicesnippets.com/image/imgpsh_fullsize.png") 或背景图片：url(${logo})

【解决方案17】：

如果你使用 webpack，你需要编辑 webpack.config.js 和把这个加进去

module: {
  rules: [
 {
      test: /\.(png|jpe?g|gif)$/i,

     dependency: { not: ['url'] },
      use: [
        {
          loader: 'url-loader',
          options: {
            limit: 8192,
          },
        },
      ],
    },
  ],
}

如果你使用 file-loader 来渲染图像，你需要像下面这样删除它：

    {
       test: /\.(png|jpe?g|gif)$/i,
       loader: 'file-loader',
    },

在您的 css 文件中，不要使用 background-image，而是使用 background：

background: url(Background);

有关带图像的 webpack 的更多信息，另请参阅： https://v4.webpack.js.org/loaders/url-loader/

【讨论】：

【解决方案18】：

这对我有用

style={{ backgroundImage: url(${require("../assets/pet4.jpeg").default}) }}

【讨论】：