Question

我正在尝试将背景图像设置为容器，因为我想将通知徽章应用于容器。问题在于，无论我做什么，我似乎都无法实际渲染。

反映渲染：

import bellImage from './assets/bell.png'

  render() {    
    return (
<div className="alertContainer" style={{background:"url("+ bellImage +")"}}>
                  </div>
)}

我还尝试了backgroundImage和background-image。当我检查容器时，我确实看到那里编码的图像。它只是没有出现。以下是chrome devtools的复制/粘贴示例：

Chrome devtools样式标签：

element.style {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAIACAYAAAD0eNT6AAAABmJLR…AAAAABAAAIAABAAAAAAgAAEAAAgAAAAAQAACAAAIAAfgGnR2N6Cb+0swAAAABJRU5ErkJggg==);
}
.header .alertContainer {
    height: 40px;
    width: 40px;
    margin-right: 1rem;
}

现在，如果我点击该背景网址链接，它会显示我的图像!!所以，它正在那里。由于某种原因它只是没有显示在页面上。

以上是更复杂组件的最小示例。如果这里没有足够的信息，请告诉我。我很感激任何帮助。

Answer 1

问题最终是图像太大了我无法判断它实际上是在渲染。我将以下内容添加到style：

"background-size": "40px 40px"

将该值设置为容器大小。就我而言，它是40x40。

通过css反应设置编码的背景图像

1 个答案: