Question

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

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

尝试此渲染，但它不起作用，代码可能是错误的

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>
        );
    }

Answer 1

噢，伙计，你这么近！这不是一个路径问题，而是一个css问题。在css文件中使用背景图像时，它看起来像这样：

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

在你现在拥有的内容中，你似乎错过了网址部分。所以如果你把它改成这个就行了：

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

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

style={fondoBorealis}

Answer 2

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

这应该有效。试试吧。

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

2 个答案: