背景图像在反应中不起作用

Posted 2023-02-22

【中文标题】背景图像在反应中不起作用

【英文标题】：Backgroundimage is not working in react

【发布时间】：2016-12-12 03:45:48

【问题描述】：

我是新来的反应并尝试使用内联样式获取背景图像。但它不起作用。

显示错误“未定义 url”

  render() 
    return (
        <div className="phase1" 
             style =  backgroundImage: url('https://lh3.googleusercontent.com/MOf9Kxxkj7GvyZlTZOnUzuYv0JAweEhlxJX6gslQvbvlhLK5_bSTK6duxY2xfbBsj43H=w300')  >

            <input id="search" 
                   type="text" 
                   placeholder=this.state.search 
                   onChange=this.updateSearch.bind(this)/>
            &nbsp; &nbsp;&nbsp; &nbsp;

            <Link className="button1" to="Form"> + </Link>
        </div>
       )
    
 

【问题讨论】：

用引号括起来，当你在 JSX 中放置花括号时，你处于 JS 上下文中，所以你实际上是在尝试调用一个名为 url 的函数，但它并不存在

你能通过如何做来展示

【参考方案1】：

CSS 值总是字符串。将backgroundImage 值用引号括起来，使其成为字符串：

<div className="phase1" style =  backgroundImage: "url('https://lh3.googleusercontent.com/MOf9Kxxkj7GvyZlTZOnUzuYv0JAweEhlxJX6gslQvbvlhLK5_bSTK6duxY2xfbBsj43H=w300')"  >

【讨论】：

@TheViralGriffin 您能否针对您遇到的问题打开一个新问题并粘贴您正在使用的代码？

我面临的问题是轻微的输入错误。已修复，谢谢。

【参考方案2】：

遇到了类似的问题，这对我有用

style=backgroundImage: 'url(' + require('./images/sword.png') + ')'

诀窍是添加require

【讨论】：

谢谢。我必须在这里指出，虽然我尝试了很多东西，但这在这里奏效了。 +1

或者，也可以使用 ES6 import 语句。

【参考方案3】：

在我的例子中，我的 url 上面有空格，所以它需要用引号 ex: 'url' 包裹，因为我直接从服务器获取 url (imagePath)。

<div style= backgroundImage: `url('$imagePath')`  />

希望这对某人有所帮助。

【讨论】：

它拯救了我的一天！谢谢！ ` ' " 太令人困惑了?

【参考方案4】：

我今天偶然发现了这个帖子。我需要动态更改backgroundImage 属性，所以require 不是一个选项。在我的 ElectronJS 应用中，我所做的只是：

const imageFilePath = './some/dynamic/path/here';
const style =  backgroundImage: `url('file://$imageFilePath')` ;

希望这对某人有帮助:)

【参考方案5】：

在 React 中为这样的图像放置相对路径

<div className="container-login100" style= backgroundImage: "url('./folder/images/bg-01.jpg')" >

它似乎不起作用，因为它是 JSX，您需要导入图像或要求它

import BackgroundImage from './../frontend_authentication_copied/images/bg-01.jpg'

...

styles = 
        backgroundImage: `url($BackgroundImage)`
    

...

<div className="container-login100" style=this.styles>

只需确保将所有图像都放在 src 文件夹中，因为如果 @987654323，src 文件夹外部不支持 相对导入 @ 用来。

【讨论】：

您的解决方案让我摆脱了困扰 2 天的问题！

【参考方案6】：

我不知道为什么，但对我来说只有一种方法是这样的：

<div style=backgroundImage: `url($require("./images/your_image").default)`></div>

没有.default 不会发生错误，但图像根本不会出现在 html 中。我希望我帮助了某人；）

【讨论】：

嗨，Saulo Felipe。您需要 .default 的原因是因为 require() 导入 CommonJS 模块，并且您的文件/图像加载器（可能是 webpack 插件）将图像暴露为 ESM 样式的默认导出。这仅适用于本地加载的图像，而不适用于本问题中的外部 URL。希望它对遇到这个问题的人仍然有用。

【参考方案7】：

今天早上我正在与同样的问题作斗争，但我能够用下面的 sn-p 解决它。

<div
    className="col-md-4 col-xs-12"
    style=
      backgroundImage: `url($require('./path/img.png'))`,
      backgroundPosition: 'center',
      backgroundSize: 'cover',
      backgroundRepeat: 'no-repeat',
    
></div>

【讨论】：

我很高兴它有帮助。干杯！