提问者:小点点

如何在reactjs中从道具中添加图像背景


我正在用reactjs建一个网站。我有一个js文件,它从另一个文件中提取道具,另一个文件是一个名为sections数组,其中包含title和imageUrl等数据。我需要使用imageuURL的道具作为每个元素的背景。我试着用风格,但没用

下面是提取的代码:

import React from 'react'

const Menuitem = (props) => {
    return(
        <div>
            <h1 className='title'>{props.title}</h1>
            <span className='subtitle'>shop now</span>
        </div>
    )
}

我使用以下函数通过app.js中数组传递代码:

function extract(item) {
  return <Menuitem title={item.title}/>
}

然后使用map函数返回结果

  function App() {
      return (
          <div className=''>
              {sections.map(extract) }
          </div>
      );
  }

我得到的结果就像图像一样。我需要从数组文件(imageURl prop)中获取每个部分的背景图像

反应js问题


共1个答案

匿名用户

如果imageURL在传递给菜单项的道具中,您可以将其内联

const Menuitem = (props) => {
    return(
        <div style={{ backgroundImage: `url(${props.imageUrl})` }}>
            <h1 className='title'>{props.title}</h1>
            <span className='subtitle'>shop now</span>
        </div>
    )
}