0
215
ViewsGIF from SRC folder in React project not showing
I have a component which should display a gif from the "/src/images" folder. Unfortunately that doesn't happen. I only get my "old" value displayed. What am I doing wrong?
Danke.js site:
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>
Result:
·
Santiago Trujillo
1 answers
Answer question0
The image file is a local asset within the app, use require to access the local asset and pass to the src attribute. Note that this is different than using a normal path string to an asset in the built public directory.
<img
src={require("../images/confetti.gif")}
alt="Danke"
width={"50%"}
style={{ borderRadius: "50%", border: "7px solid black" }}
/>
or
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>
·
Santiago Trujillo
Report
Answer question