Dynamic require image is not working in reactjs/nextjs

Question

   {
       storedfiles.map(item => {
                        // return <li key={item.id}>{item.imagepath}</li>
                        return (
                            <div>
                            <li key={item.id}>{item.imagepath}</li>
                                <img src={require(`${item.imagepath}`)} style={{width:"100px" , height:'100px'}} alt='pics' />
                                </div>
                        )
                    })
                }

i am getting image path from the database which is { item.imagepath }, you can see in the img tag. it is not working , it says couldn't find that module. "...path" but when i put that hard corded path on the place of variable , it shows an img . mean with hard corded value it's working and with variable it's not. How could i solve it?

Does this answer your question? React Native: require() with Dynamic String? — Anurag Srivastava
– Anurag Srivastava, Commented Apr 5, 2020 at 18:09
nop, they just have images in their static folder which they try to catch by using require and storing them in another module in different variables and then accessing them, but in my case i cant do that... my images paths are coming from db when be n number... — Asim Hafeez
– Asim Hafeez, Commented Apr 5, 2020 at 18:20
What is the scenario of file path saving? 1. Full path? 2. Relative file path ? 3. Only file name + extension ? — OO7
– OO7, Commented Apr 5, 2020 at 19:12

Asim Hafeez · Accepted Answer · 2020-04-06 11:24:29Z

2

Thanks to all of you... this problem is solved.

{

                storedfiles.map(item => {
                    return (
                        <div>
                        <li key={item.id}>{item.imagepath}</li>
                            <img src={process.env.PUBLIC_URL , `${item.imagepath}`} style={{width:"100px" , height:'100px'}} alt='pics' />
                            </div>
                    )
                })
            }

store images in the public directory of reactjs or nextjs project and access them like this through env variable. It works <3 also check it if you need more specific answer https://create-react-app.dev/docs/adding-images-fonts-and-files/

answered Apr 6, 2020 at 11:24

Asim Hafeez

593 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Darryl RN · Accepted Answer · 2020-04-06 01:17:54Z

1

First, require is being used to load a module, which is why its return value is typically assigned to a variable: var misc = require('./misc');, and prop src from tag img should receive URL, not a module.
There is a reason why we define a project root folder and not just taking from any other path outside project root folder. Better to put your image inside your project root folder or use CDN to store that image and put the fullpath like: https://cdn.com/path/to/image in prop src in tag img.

Hope that helps!

answered Apr 6, 2020 at 1:17

Darryl RN

8,4405 gold badges32 silver badges51 bronze badges

Collectives™ on Stack Overflow

Dynamic require image is not working in reactjs/nextjs

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related