Question

当我尝试将图像模板传递给react元素中的样式时，图像不会显示在背景中。

<div className="avatar">
  <span style={{background:`url('/images/covers/${this.state.artists.cover}.jpg') no-repeat`}}></span>
</div>

当我尝试检查元素时。它显示

<span></span>

未设置样式。我在这做错了什么？

Answer 1

可能你的表达式'/images/covers/${this.state.artists.cover}.jpg'没有被引擎解析，因为你使用了简单的字符串而没有转义，字符串文字不能将表达式${this.state.artists.cover}转换为值。

所以，你需要做这样的事情：

<div className="avatar">
  <span style={{background:`url(\'/images/covers/${this.state.artists.cover}.jpg\') no-repeat`}}></span>
</div>

希望它会有所帮助。

Answer 2

试试这个：

style={{"background: url("  + ( this.state.artists.cover ) + ")" }}

Answer 3

好的，我没有看到你的CSS，我想我看到了问题。事实是<span>标记是内联元素 - 它在空白时无法在背景上显示图像。

您应该为其添加一些块样式（或将一些内容放入其中）

span {
    display: block; // or inline-block
    width: 100px;
    height: 100px;
}

然后不要玩蜱 - 在这种情况下你只能使用一个

<span style={{background: 'url(https://lilpickmeupdotcom.files.wordpress.com/2015/01/happy-smile-guy.jpg)'}}></span>

Answer 4

如果你正在使用webpack，你应该设置一个加载器url-loader来使用JSX中的jpg文件。那么你应该在使用它之前导入jpg照片：

<div className="avatar">
    <span style={{ background: `url(${require(`./images/covers/${this.state.artists.cover}.jpg`)}) no-repeat` }} />
</div>

或者像这样：

<div className="avatar">
    <span style={{ background: `url(${require(`url-loader!./images/covers/${this.state.artists.cover}.jpg`)}) no-repeat` }} />
</div>

Answer 5

正如Kotsur的回答中所提到的，你的表达式包含一些像'这样的字符，因此它不会被解析。但是你应该编码this.state.artists.cover而不是编码引号。

尝试类似：

<div className="avatar">
  <span style={{background:`url('/images/covers/${encodeURIComponent(this.state.artists.cover).replace("'", "\\'")}.jpg') no-repeat`}}></span>
</div>

图像未显示在css的背景中

5 个答案: