使用React内联样式设置backgroundImage

我正在尝试访问静态图像以在React的内联backgroundImage属性中使用。不幸的是，我对如何执行此操作一无所知。
通常，我认为您只是这样做如下：有人可以解释两者之间的区别吗？
例如：
<img>可以正常工作。
谢谢！

#1 楼

backgroundImage属性内的花括号错误。

您可能正在将webpack和图像文件加载器一起使用，因此Background应该已经是一个字符串：达到相同的效果：

backgroundImage: `url(${Background})`

我应该将其添加到我的问题中。我确实设置了宽度和高度（分别为100％/ 400px）。出现的问题是由于我相信React如何处理静态图片。

–克里斯
16年8月28日在23:23

是否应该按照w3.org/TR/CSS2/syndata.html#value-def-uri在连接之前在Background变量中转义Background变量中的'（“，'）'和空格字符？

– qbolec
17年7月12日在10:31

完整语法应如下所示：style = {{backgroundImage：“ url（” + Background +“）”}}

– Mike
17-10-12在18:37

只是为了扩展@mike的注释，您需要双花括号，因为一个用于React进入的是JS模式，另一个用于表示新对象。

–西门人Tomoiagă
18年8月20日在7:54

从'./background.jpg'提供此导入背景后，出现错误'Section'已定义但从未使用'； var sectionStyle = {宽度：“ 100％”，高度：“ 400px”，backgroundImage：url（$ {Background}）};类Section扩展了Component {render（）{return（

）; }}

–帕瓦南M S
18-10-22在9:07

#2 楼

如果使用ES5-

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

如果使用ES6-

backgroundImage: `url(${Background})`

基本上消除不必要的卷曲在为backgroundImage属性添加值时使用花括号即可。

对于我来说，在ES6中是backgroundImage：`url（“ $ {Background}”）`，因为您的ES6示例对我不起作用。

– S ..
19-10-7在6:39

您好巴拉德，如果要添加多个背景图像，您将如何处理。说两个图像，您将如何做？谢谢

–通往成功之路
6月22日4:40

@S ..谢谢，这对我有所帮助。我卡住了。

–Utkarsh
11月6日下午16:29

#3 楼

内联样式可将任何图像设置为全屏显示：

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'
}}

谢谢一堆，这就是我想要的

–阿格劳瓦尔王子
8月10日14:00

#4 楼

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

<div style={{ backgroundImage: `url(require("images/img.svg"))` }}>

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

如果图像路径是Web URL而不是本地路径怎么办？像https://images.com/myimage.png这样的东西

–阿米奴·卡诺（Aminu Kano）
18年8月2日在4:31

好的，我理解使用基于Web的URL时。我应该只写url（https://images.com/myimage.png）

–阿米奴·卡诺（Aminu Kano）
18年8月2日在4:35

#5 楼

对我来说，工作是这样的

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

#6 楼

它对我有用：

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

#7 楼

您可以将Template Literals（用反引号括起来：`...`）代替backgroundImage属性，例如：

backgroundImage: `url(${Background})`

#8 楼

试试这个：

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

#9 楼

试试这个对我来说有效

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

#10 楼

只需添加必需的文件或URL

<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 楼

将图像复制到要查看它的React Component文件夹中。
复制以下代码：

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

使用CSS给您的.welcomer一个高度，以便您可以看到所需大小的图像。

#12 楼

对于使用ReactJS的local文件。
尝试

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

<div
style={{ background-image: 'url(' + Image + ')', background-size: 'auto' }}
>Hello
</div>

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

#13 楼

您可以尝试使用

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

不建议这样做，因为这会阻止Webpack知道资产。如果react应用程序离线打开，这将导致缓存未命中。

–托马斯·凯基森（Thomas Kekeisen）
3月13日13:14

编程黑洞网