I don't know, I've imported local images before but it isn't working today.

I have this helper file which exports the images as an array

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;

Then I use them here to get a random image here

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

And then I get hat hero state in my jsx img tag

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

Why Isn't it working. I'm not using Next or gatsby or anything. I'm using React with webpack 2. Anyone know what is wrong?

Another interesting thing is that if I import a single image like this

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

And Use It directly in the image

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

Suddenly, it works. What is the Problem?

Thanks, Lakshya