Reactjs - div 的背景图像不起作用

Question

我正在尝试在组件中添加div的背景图像，但它不起作用。

{slides.map((item) => {
return (
<div key={item.id} className="item_slider"
style={{background: `url(/images/covers/${item.cover})`}}
>
<div className="caption">
<h4>{item.topic}</h4>
<p>{item.title}</p>
</div>
</div>
)
})}

item_slider CSS

.item_slider {
height: 700px;
background-size: cover !important;
background-position: center center !important;
position: relative;
font-family: 'Fjalla One', sans-serif;
}

图像在公共文件夹中，尽管我也将它们复制到src文件夹中，但没有运气。谁能帮我解决这个问题？

Answer 1

尝试使用您自己的网址

class App extends React.Component {
constructor(props) {
super(props);
this._size = '350x150'
this._style = {
backgroundImage: `url(http://via.placeholder.com/${this._size})`
}
}
render() {
return ( 
<div style={this._style} className="example">
<h1>Content here</h1>
</div>
)
}
}
ReactDOM.render( < App / > , document.getElementById("root"));

.example {
background-size: cover !important;
background-position: center center !important;
position: relative;
height: 300px;
font-family: 'Fjalla One', sans-serif;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

所以，你的风格应该有效，除了backgroundImage：

...
style={{backgroundImage: `url(/images/covers/${item.cover})`}}
...

只要确保你的路径是正确的，${item.cover}实际上有一个值。如果它仍然不起作用，不妨尝试将该样式从 CSS 移动到您的内联样式中，因为它无论如何都是相同的元素。

Answer 2

试试这个：

style={{backgroundImage: 'url(' + require(`/images/covers/${item.cover}`) + ')'}}

如果不起作用，请尝试使用图片网址：

const url = "https://images.freeimages.com/images/large-previews/f2c/effi-1-1366221.jpg";

和：

style={{backgroundImage: 'url(' + require(`url`) + ')'}}

这行得通吗？如果是这样，则问题可能出在图像路径上。 将图像放在组件的同一文件夹中，然后尝试(我假设图像名称为 zzz.jpg：

style={{backgroundImage: 'url(' + require(`./zzz.jpg}`) + ')'}}

如果这也有效，请再次检查路径...