Problem with image path generated from function in React

I’m having trouble getting React to find my local image when it is generated by a function.

The following code works fine:

<img
                  src={require(`../../img/equipment/${item.img}.png`)}
                  alt="item"
                />

But this fails:

// Generate image path name
    let getEquipmentImage = (slot) => {
      if(equipment){
        if(equipment[slot]){
          console.log(equipment)
          console.log(`../../img/equipment/${equipment[slot].img}.png`)
          return `../../img/equipment/${equipment[slot].img}.png`
        }
      }
      return EmptySlot
    }

   let shouldersImg = getEquipmentImage("shoulders")

// Display image

<img alt="eq" src={require(shouldersImg)} />

Anyone know this one?

@SnowdenWintermute I have had this same problem. I wanted to dynamically include images but was unable to do so. I had looked it up and the solution for this problem was the best I could find (which was disappointing).

Check this out as well

I hope someone can provide a better answer or a workaround. Wish I could do more.

1 Like

Its not ideal but it works (the 2nd link). Thank you, I’ll mark as solution.

What is your folder structure? And what tools are you using to build the app (eg what is allowing you to require that image)

It’s React. You can check out the folders here:

I think require is a React method, but I’m still pretty new so that could be wrong.

No. require is the way you import scripts using the CommonJS module system, which is what NodeJS uses.

Something is allowing you to use it to import images, and I’m not 100% on what it is. You can’t do this natively (images are not .js files), so there is some tool that is doing some magic to allow this.

The build tools used for the front-end of this Express app seem to be webpack (via create-react-app) for React plus Gulp to build the SCSS. This does a lot of stuff implicitly, magically.

The reason the image paths are wrong is because the React stuff (and all the rest of the front-end JS) is being bundled into a single file that the HTML page is getting in a <script> tag.

The image path has to be relative to that file: it has absolutely zero idea what your folder structure was before all the JS was bundled up.

1 Like

The thing is, when I put in a string that matches what the variable would output it works fine. Problem comes when I use a variable. Both would show the same relative path to my images.

What I mean is that require happens before you bundle the JS. It gets the image because before it’s bundled, the path is correct. If you put the same path in directly, it isn’t going to work because it’s not going to be the same path, your folder structure is not the same as it was before everything was put in a single JS file that is output wherever in the app it gets output.

Whatever is magically dealing with your images using require is coded so that when you build the react part of the app, the paths to the images all stay correct.

Edit: I can’t remember the conventions here for where stuff gets served from but in terms of folder structure the front-end is going to be in public I think??

So ../../img/equipment/ means up out of the public folder then up another level, then there needs to be a folder called img there, that’s definitely not the case.

1 Like

Yes you are right about the public folder. I read more on the 1st link from @j8ahmed and based on one of the replies in that thread I moved all my img to public folder. Works great now! I am still not sure about the require magic. I tried in vain to find the thread that suggested me to use it in the first place for an img path.

img paths are now /img/equipment/${equipment.head.img}.png

I found the thread I was using that suggested to use require. Seems it is a webpack thing:

from the answer:

“When using Webpack you need to require images in order for Webpack to process them, which would explain why external images load while internal do not, so instead of <img src={"/images/resto.png"} /> you need to use <img src={require('/images/image-name.png')} /> replacing image-name.png with the correct image name for each of them. That way Webpack is able to process and replace the source img.”

1 Like