es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Cambiando la imagen de fondo usando Create React App

17 Jun, 2023 Programación

Tengo problemas para usar Create React App para cambiar la imagen de fondo que se le asigna a mi componente a través de props. La documentación dice que use la sintaxis de importación. Esto funciona, pero significaría que tendría que codificar en duro cada imagen de fondo para cada componente. ¿Hay alguna manera de hacer esto dinámicamente?

Noté que no me permite usar literales de plantilla en la sintaxis de importación tambié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;

P.D.: Revisé otros artículos en StackOverflow sobre esto y no proporcionaron mucha ayuda.

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Parece que ha codificado la ruta a la imagen de fondo en su componente. Para hacerlo dinámico, puede pasar la ruta de la imagen como propiedad a su componente Avatar.

    Aquí está cómo puede modificar su código:

    import React from 'react';
import '../css/Avatar.css';

const Avatar = (props) => {
  const { backgroundImage } = props;

  return (
    <div style="{{" backgroundimage:="" `url(${backgroundimage})`="" }}="" classname="avatar">
    </div>
  )
}

export default Avatar;

    Ahora, puede pasar la ruta de la imagen dinámicamente a través de su componente padre de esta manera:

    import React from 'react';
import Avatar from './Avatar';

const App = () => {
  const backgroundImage = '../images/joe_exotic.jpg';

  return (
    <div classname="App">
      <avatar backgroundimage="{backgroundImage}"></avatar>
    </div>
  );
}

export default App;

    De esta manera, puede pasar diferentes imágenes de fondo al componente Avatar sin codificarlas dentro del componente en sí mismo.

Comments are closed.