Tengo un archivo assets.js que uso para manejar imágenes y videos como este.

 import Bag from "./Bag.png"; import World from "./World.png"; export default { World, Bag, };

También tengo un componente principal, llamemos A . El componente representa un subcomponente, llamemos B dos veces. Cada vez con una imagen de fondo diferente y un texto diferente. Mi enfoque inicial fue crear un objeto como este

 import assets from "../../assets/assets"; const category = [ { type: "For Domestic", bgImage: assets.Bag, }, { type: "For International", bgImage: assets.World, }, ];

Este objeto es lo que pasaría al componente secundario como accesorios como

 <B category={category[0]} /> <B category={category[1]} />

Ahora, en el componente secundario B , este fue mi enfoque inicial

 const Trips = ({category }) => { return( <div className="Trips__container flex__container-v" style={{ backgroundColor: theme.tripsColor, backroundImage : category.bgImage, }} > </div> ) }

Importé todo correctamente y pasé los componentes correctamente. Sin embargo, mis imágenes no aparecen como fondo. ¿Qué estoy haciendo mal? Los colores de fondo funcionan bien y también funcionan otros CSS en línea. No entiendo qué es diferente para las imágenes de fondo.

Cualquier otra sugerencia o un enfoque diferente son bienvenidos.