1

I am trying to render multiple images dynamically using a function call. Inside the src attribute for the IMG tag, I am passing the require(src) too, but I get the error of can't find the module.

getImages(ID) {
        return this.state.imgData[ID].map((row, index) => {
            return (
                <div className = "col-lg-4 col-md-4 col-sm-6">
                    <h5 style = {{textAlign: "center"}}>{this.state.dates[ID][index].split("/").join("-")}</h5>
                    <div className = "thumbnail">
                        <img src = {require(row)}></img>
                    </div>
                </div>
            );
        });
    }

But when I try this by manually typing in the string of what's inside the row variable, it seems to work.

Rahul Raj
  • 41
  • 7
  • 1
    `````` not working for you ? If not please host a sandbox so that it is easier to reproduce the problem. – gautamits May 02 '20 at 12:00
  • `` or import image and use `` – Amir-Mousavi May 02 '20 at 12:04
  • @gautamits. Nope. That doesn't work either. It just shows the images as broken. – Rahul Raj May 02 '20 at 12:04
  • @Amir-Mousavi. I am using the require(PATH_TO_IMAGE). It just says module not found. Even though when I the value for the row variable manually, then it works. Don't know why. I can't import all images since there are a lot. – Rahul Raj May 02 '20 at 12:06
  • Can you try [dynamic require](https://stackoverflow.com/a/61212067/2873538)? – Ajeet Shah May 02 '20 at 12:11
  • So you are probably doing something wrong with providing the right path regarding the mapped `imgData[ID]` – Amir-Mousavi May 02 '20 at 12:22
  • @AjeetShah Hi Ajeet. Can you elaborate further on this, please? I have never had any experience using dynamic require. – Rahul Raj May 02 '20 at 12:22
  • @Amir-Mousavi. I tried replacing the require(row) with the require(**string inside of row**). It renders the image perfectly. I think it has something to do with dynamic rendering. – Rahul Raj May 02 '20 at 12:24
  • This does not help. where the images are physically stored? are they a URL? what are the formats of images? what is the content of the `imgData[ID]`? what do you mean by the `string inside of row`? there is no problem with dynamic rendering. you provide something wrong to img tag – Amir-Mousavi May 02 '20 at 12:30
  • @RahulRaj Try this: ``. The first part Inside require is `directory` and the second is `fileName` e.g. `my-image.png`. Make sure to use the correct directory as per your image file location. – Ajeet Shah May 02 '20 at 12:53
  • @Amir-Mousavi Basically my backend server is saving images at the runtime in a folder outside of dist. From the backend, I am sending the URL of the images to the react frontend and using the require to put the local URL in the src tag. the imgData contains URLs for each ID respectively. Now when I type the URL of a picture in a string format to require, it renders the image perfectly. But when I am using it through variable, it doesn't seem to work. **module not found** is the error. I don't know if its a Webpack development server error or any other issue. – Rahul Raj May 04 '20 at 13:27
  • @AjeetShah It didn't work. I am getting errors in that format for the path not found in the logs of webpack. – Rahul Raj May 04 '20 at 13:28
  • @RahulRaj Can you create a [sandbox](https://codesandbox.io/)? – Ajeet Shah May 04 '20 at 13:35

0 Answers0