javascript - 有没有办法在反应中导入本地图像？

Question

我不知道，我之前已经导入了本地图像，但它今天不起作用。

我有这个帮助文件，它将图像导出为数组

const images = [
  require("../assets/1.jpeg"),
  require("../assets/2.jpeg"),
  require("../assets/3.jpeg"),
  require("../assets/4.jpeg"),
  require("../assets/5.jpeg"),
  require("../assets/6.jpeg"),
]

export default images;

然后我在这里使用它们来获取随机图像

//Random Image
const randomImg = () => {
  console.log(images);
  const UU = images[Math.floor(Math.random * images.length)];
  return UU;
}
const [hero, setHero] = useState(randomImg());

然后我在我的 jsx img 标签中得到帽子英雄状态

<img
  className="headerImg"
  src={hero}
  alt="Hero Image"
/>

为什么它不起作用。我没有使用 Next 或 gatsby 或任何东西。我正在将 React 与 webpack 2 一起使用。有人知道出了什么问题吗？

另一个有趣的事情是，如果我像这样导入单个图像

import hero from "../../assets/1.jpeg";

并直接在图像中使用它

<img
  className="headerImg"
  src={hero}
  alt=""
/>

突然，它起作用了。问题是什么？

谢谢， 拉克夏

标签： javascriptreactjs