为什么不使用内联样式应用背景图像？

Question

我在 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>
  )}

我正在匹配用户点击的项目，在搜索我的 data.js 文件后，设置适当的项目。每个项目都有一个独特的图像，因此必须动态呈现。但这对我来说不起作用。

Answer 1

你必须在那里使用 url() CSS 函数。

<Hero hero="roomshero" style={{backgroundImage:`url(${img1})`}}>
     ...
</Hero>

希望这会有所帮助。

Answer 2

您必须在给定的 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>
  )}

另外不要忘记将 width 和 height 属性设置为横幅标签以查看图像。

为什么不使用内联样式应用背景图像？

Why background-Image not getting applied using inline styles?

javascript

css

background

inline-styles

reactjs