Tengo un componente Hero en react.js:
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> )}Estoy haciendo coincidir el elemento en el que el usuario hizo clic y, después de buscarlo en mi archivo data.js, configuro el elemento apropiado. Cada elemento tiene una imagen única y, por lo tanto, debe renderizarse dinámicamente. Pero esto no está funcionando en mi caso.
Tienes que usar la función CSS url() allí.
<Hero hero="roomshero" style={{backgroundImage:`url(${img1})`}}> ... </Hero>Espero que esto sea útil.
Tienes que agregar url delante de tu url img1 dado. Ejemplo :
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> )}Además, no olvide establecer las propiedades de ancho y alto en la etiqueta del banner para ver la imagen.