Tengo un componente que debería mostrar un gif de la carpeta "/src/images" . Desafortunadamente eso no sucede. Solo se muestra mi valor "antiguo". ¿Qué estoy haciendo mal?
Sitio de Danke.js:
import Confetti from "../images/confetti.gif"; <Box sx={{ justifyContent: "center", display: "flex" }}> <img src={Confetti} alt="Danke" width={"50%"} style={{ borderRadius: "50%", border: "7px solid black" }} /> </Box>Resultado:
El archivo de imagen es un activo local dentro de la aplicación, use require para acceder al activo local y pase al atributo src . Tenga en cuenta que esto es diferente a usar una cadena de ruta normal a un activo en el directorio público creado.
<img src={require("../images/confetti.gif")} alt="Danke" width={"50%"} style={{ borderRadius: "50%", border: "7px solid black" }} />o
const Confetti = require("../images/confetti.gif"); <Box sx={{ justifyContent: "center", display: "flex" }}> <img src={Confetti} alt="Danke" width={"50%"} style={{ borderRadius: "50%", border: "7px solid black" }} /> </Box>