Esta es mi estructura de carpetas:
src --Assets/ --pug.svg --scss.svg --Layouts/ --Skills/ --Skills.js --App.jsmi matriz
const skills = [ { id: 1, title: 'Pug', image: 'url(../../Assets/pug.svg)' }, { id: 2, title: 'SCSS', image: 'url(../../Assets/scss.svg)' }En Skills.js, quiero configurar la imagen de fondo usando los estilos en línea de React, pero no funciona. No recibo ningún error, solo no aparece la imagen de fondo.
{ skills.map(skill => ( <motion.div className='column' key={skill.id} variants={container}> <div className='skill'> <div className='skill-image' style={{ backgroundImage: `${skill.image}` }}/> <h3>{skill.title}</h3> </div> </motion.div> )) }El problema es que su carpeta de Assets no es pública. Si mueve las imágenes de Assets a public/images , verá que el fondo comenzará a funcionar:
Tienes dos opciones ahora -
import la imagen
import background from "../../Assets/pug.svg"; backgroundImage: `url(${background})`O
uso require
backgroundImage: `url(${require("../../Assets/pug.svg")})`No puede usar rutas relativas en background-image directamente. Esos no se podrán resolver desde la perspectiva del navegador ya que los módulos no se conservan, sino que se agrupan en su lugar.
Ahora, para que funcione puedes:
a) mueva sus activos (imágenes) a /public y luego reemplace sus rutas con /pug.svg y /scss.svg .
b) importe imágenes directamente en sus archivos JavaScript usando import
La primera opción usa el directorio especial /público. Se puede acceder a los activos ubicados allí mediante un navegador. Consulte https://create-react-app.dev/docs/using-the-public-folder/ para obtener más detalles.
En cuanto a la importación de activos directamente, esto depende en gran medida de su paquete (Webpack). Resolverá esos archivos durante la construcción y los adjuntará a la salida. Si desea obtener más información, visitehttps://create-react-app.dev/docs/adding-images-fonts-and-files .
Mire el siguiente bloque de código. Reemplacé sus rutas relativas con URL devueltas de declaraciones de importación. Puede buscarlos usando console.log para ver la diferencia.
import pugImage from '../../Assets/pug.svg'; import scssImage from '../../Assets/scss.svg'; const skills = [ { id: 1, title: 'Pug', image: pugImage, }, { id: 2, title: 'SCSS', image: scssImage, } ]Cambiar imagen de fondo a fondo
{ skills.map(skill => ( <motion.div className='column' key={skill.id} variants={container}> <div className='skill'> <div className='skill-image' style={{ background: `${skill.image}` }}/> <h3>{skill.title}</h3> </div> </motion.div> )) }