Tengo problemas para usar la aplicación Create React para cambiar una imagen de fondo que envío a mi componente a través de accesorios. Los documentos dicen que use la sintaxis de importación. Esto funciona, pero significaría que tengo que codificar cada imagen de fondo para cada componente. De todos modos para hacer esto dinámicamente?
Noté que tampoco me permite usar literales de plantilla en la sintaxis de importación. Eso habría solucionado mi problema, creo.
import '../css/Avatar.css'; import photo from "../images/joe_exotic.jpg"; const Avatar = (props) => { return ( <div style={{backgroundImage: `url("${photo}")`}} className="avatar"> </div> ) } export default Avatar;PD: revisé los otros artículos en StackOverflow con respecto a esto y no me ayudaron mucho.
Si quiere evitar esta forma de hacerlo, puede poner sus imágenes en la carpeta public de su aplicación React , y agarrarlas así:
import '../css/Avatar.css'; const Avatar = (props) => { return ( <div style={{backgroundImage: `url("/joe_exotic.jpg")`}} className="avatar"> </div> ) } export default Avatar;Espero que te funcione. buena suerte.
import '../css/Avatar.css'; import photo from "../images/joe_exotic.jpg"; const Avatar = (props) => { return ( <div style={{backgroundImage:url(photo)}} className="avatar"> </div> ) } export default Avatar;