What I am trying to achieve is that a particular image should be loaded for a div, when present. A default image should be loaded for all other divs for whom specific (depending on the name) image is not present.

```
const defaultImg = require('../images/default.jpg');

```

But this is the value that console returns for **defaultImg** - "image /static/media/default.47ce6e77.jpg" 

```
  <img src={require(`../images/${imageUrl}.jpg`)}    //if I remove ther require form here then the default image is loaded for eveerything, even when the particular image is present. 
      onError={(event) => event.target.setAttribute("src", {defaultImg})} alt="" />

```

Instead of the defulat image getting loaded, it throws

```
Error: Cannot find module './<image-name>.jpg'

```

I also tried using React Image Fallback

```
                {/* <ReactImageFallback
                src={require(`../images/${imageUrl}.jpg`)}
                fallbackImage={defaultImg}
                initialImage="loader.gif"
                alt="A cool image should be here"
                className="project-pic"
            /> */}

```

Doesn't work any different.

If `const defaultImg = require('../images/default.jpg');`

Why does it become `/static/media/default.47ce6e77.jpg` ?