Reactjs - div的背景图像不起作用
Posted
技术标签:
【中文标题】Reactjs - div的背景图像不起作用【英文标题】:Reactjs - background image of a div is not working 【发布时间】:2018-10-16 15:26:44 【问题描述】:我正在尝试在组件中添加 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 文件夹中,但没有运气。谁能帮我解决这个问题?
【问题讨论】:
尝试使用backgroundImage代替背景,react style属性是驼峰式的:) 两种都试过了,都没有成功 【参考方案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 移到您的内联样式中,因为它仍然是同一个元素。
【讨论】:
我怀疑您的数据或路径存在问题。尝试使用包含http
的完整 URL。或者,您可以尝试不使用模板文字并使用经典方式:url('/images/covers/' + item.cover)
。顺便问一下,你的项目是create-react-app
生成的吗?【参考方案2】:
试试这个:
style=backgroundImage: 'url(' + require(`/images/covers/$item.cover`) + ')'
如果不起作用,请尝试使用图片 URL:
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`) + ')'
如果这也有效,请再次检查路径...
【讨论】:
也试过了。它显示未找到模块。无法解析“/images/covers”以上是关于Reactjs - div的背景图像不起作用的主要内容,如果未能解决你的问题,请参考以下文章