我是一个新的react ,并试图获得与内联风格的背景图像.但它不起作用.

显示错误"未定义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>
       )
    }
 }

推荐答案

CSS值总是字符串.将backgroundImage的值用引号括起来,使其成为字符串:

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

React-native相关问答推荐

如何在API调用期间将本地存储(Expressc存储)中的令牌传递到后台

添加REACT-Native-SVG时出现错误-失败:构建失败并出现异常

如何在 React / React Native 中使用 Emscripten 编译的 JavaScript

如何为我的 React Native Android 应用程序使用 Crashlytics?

React Native:约束 Animated.Value

React Native - 如何判断 UI/元素?

React-Native:显示加载屏幕直到加载 webview

错误:安装 react-native-elements 后无法识别字体系列 Material Design 图标?

如何将组件中的props传递给 FlatList renderItem

在 Windows 上进行本机调试

React-Native 应用程序中来自 Babel 的未知选项错误

如何在 array.map 中的每个元素之后添加逗号,除了 React JSX 中的最后一个元素

在 Android React Native 应用程序中正确使用 Intl

React native expection java.lang.UnsatisfiedLinkError: dlopen failed: "/data/data/{package}/lib-main/libgnustl_shared.so" is 32-bit instead of 64-bit

使用 WSL2 运行时如何将手机连接到 expo

Rich ReactNative TextInput

react-native如何禁用android开发模式

更改导航标题背景 colored颜色

react-native 开始给出 Invalid 正则表达式无效错误

如何更改后退按钮标签,react-navigation