Question

我尝试访问静态图像，以便在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 } />效果很好。

谢谢！

Answer 1

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

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

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

backgroundImage: `url(${Background})`

Answer 2

如果您使用的是ES5 -

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

如果您使用的是ES6 -

backgroundImage: `url(${Background})`

在向backgroundImage属性添加值时，基本上删除不必要的花括号将起作用。

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

Answer 4

对我来说，有这样的工作

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

Answer 5

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

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

Answer 6

它对我有用：

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

Answer 7

尝试一下：

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

Answer 8

尝试一下，在我的情况下有效

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

Answer 9

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

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

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

Answer 10

您可以对backgroundImage属性使用“模板文字”（用反引号括起来：“ ...”）代替，例如：

backgroundImage: `url(${Background})`

Answer 11

您可以尝试usimg

commune.type

Answer 12

只需在文件或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/进行转化

Answer 13

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

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

使用CSS为.welcomer赋予高度，以便您可以看到所需大小的图像。

Answer 14

对于一个local文件，如果是ReactJS。试试

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

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

使用内联样式的ReactJS就是这种情况，其中Image是必须通过路径导入的本地文件。

Answer 15

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

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

Answer 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

使用React内联样式设置backgroundImage

16 个答案: