[英]Why background-Image not getting applied using inline styles?
I have a Hero component in react.js:我在 react.js 中有一个 Hero 组件:
if(item.fields!=undefined)
{
var img1=item.fields.images[0].fields.file.url
return (
<Hero hero="roomshero" style={{backgroundImage:`${img1}`}}>
<Banner className="banner" title={`${item.fields.name}`} subtitle="none">
<Link to="/rooms" className="btn-primary">Back to Rooms</Link>
</Banner>
</Hero>
)}
I am getting matching the item clicked by the user and after searching it my data.js file, setting the appropriate item.我正在匹配用户点击的项目,并在搜索我的 data.js 文件后设置适当的项目。 Each item has a unique image and hence has to be rendered dynamically.每个项目都有一个独特的图像,因此必须动态呈现。 But this is not working in my case.但这对我来说不起作用。
You have to use the url() CSS function there.您必须在那里使用 url() CSS function。
<Hero hero="roomshero" style={{backgroundImage:`url(${img1})`}}>
...
</Hero>
Hope this would be helpful.希望这会有所帮助。
You have to add url infront of your given img1 url. Example:您必须在给定的 img1 url 前面添加url。示例:
if(item.fields!=undefined)
{
var img1=item.fields.images[0].fields.file.url
return (
<Hero hero="roomshero" style={{backgroundImage:`url(${img1})`}}>
<Banner className="banner" title={`${item.fields.name}`} subtitle="none">
<Link to="/rooms" className="btn-primary">Back to Rooms</Link>
</Banner>
</Hero>
)}
Also don't forget to set the width and height properties to banner tag to view the image.也不要忘记将宽度和高度属性设置为横幅标签以查看图像。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.