来自 React 项目中 SRC 文件夹的 GIF 未显示

Question

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:

Answer 1

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>