How can I display an image in React using the directory address from a database (MERN)?-CodePudding

I am uploading images using multer in a folder and save the path in MongoDB. However, when I try to use that address to show the image in react, I get a blank page (rendering error). So, something like <img src={require(shop.image)} /> gives me a blank page.

Here is the .jsx code

shops.map((shop, key) => (
                                                <div className="shop" key={key}>
                                                    <img src={require(shop.image)} alt="" />
                                                    <div className="shop-content">
                                                        <h1>{shop.name}</h1>
                                                        <p>{shop.street}</p>
                                                        <p>ID: {shop._id}</p>
                                                        <button onClick={() => { changeEdit(shop) }}>Edit</button>
                                                        <button>Delete</button>
                                                    </div>
                                                </div>
                                            )
                                            )

Here is an image with a document from the collection This is the error that I get This is the directory tree

Generally speaking, what do I have to do in order to fix my problem and be able to show these images without getting a blank screen?

If I put the the directory as a string ( src = {require("../../../")} ) it works perfectly. So the address is correct, but react still won't show my image.

CodePudding user response：

I have fixed it. I have used my server side to host my images and get links of them by serving the local files, using app.use( "/directory", express.static("directory")) and now I can easily access and render any image by using links like localhost:3000/shops/image.png etc...