如何在 React with Meteor 中在线应用样式？答案

【问题标题】：How can I apply styles online in React with Meteor?如何在 React with Meteor 中在线应用样式？
【发布时间】：2018-05-23 03:28:23
【问题描述】：

如何在 React with Meteor 中在线应用样式？

我想使用本地图像作为容器的背景，但是当调用保存在public 文件夹中的images/borealis.jpg 中的图像时，我的代码不起作用。

试试这个渲染，但它不起作用，可能是代码有问题

render() {
        const fondoBorealis = {backgroundImage: 'images/borealis.jpg'};
        return(
            <div className="container-logeo-vitae">
            <div style={{fondoBorealis}} className="logeo-vitae">
                <div className="header wrap">
                    <h1>borealis </h1>
                </div>
                    <div className="form">
                    <center>
                    {this.state.error ? <p>{this.state.error}</p> : undefined}
                        <form className="form-logeo-vitae" onSubmit={this.onSubmit.bind(this)}>
                            <input className="input-logeo" autoComplete="off" type="email" ref="email" placeholder="correo" />
                            <input className="input-logeo" autoComplete="off" type="password" ref="pass" placeholder="••••••••••" />
                            <button className="btn">login</button>
                        </form>
                    <Link to="/registro" className="link-to">crea una cuenta.</Link>
                    </center>
                    </div>
            </div>  
            </div>
        );
    }

【问题讨论】：

如果你在路径的开头添加另一个'/'，像这样：/images/borealis.jpg，也不起作用？

标签： reactjs meteor ecmascript-6

【解决方案1】：

哦，伙计，你离得太近了！这不是路径问题，而是 CSS 问题。在 css 文件中使用背景图片时，它看起来像这样：

background-image: url(/images/borealis.jpg);

在您现在拥有的内容中，您似乎只是错过了 url 部分。因此，如果您将其更改为以下内容，它将起作用：

const fondoBorealis = {backgroundImage: 'url(/images/borealis.jpg)'};

要使用它，您可以这样做（使用一组花括号。您当前的代码中有两组）：

style={fondoBorealis}

【讨论】：

【解决方案2】：

var co_img = "/images/borealis.jpg";
const sheshema = {
  backgroundImage: "url(" + co_img + ")"
}
<div style={sheshema}>
 </div>

这应该可行。试试看。

【讨论】：