0

I have a system where I need to upload images to MySQL and display them in my system. I am able to save the pictures uploaded, however I am having trouble displaying the pictures. When I copied the path of one of my pictures, the path on my inspect element would be something like this:

src="file:///C:/Users/User/myproject/client/public/images/image-1648889022596.png"

So I saved the image in MySQL as above path. However, my system won't show the picture. Here is my simple code for showing the pictures on front-end:

<Row className = "mb-5 text-center">
   <Col className = "fw-bold">Image</Col>
    <Col className = "fw-bold">Name</Col>
     {attachmentList.map((val2, key2) => {
       return(
        <div key = {key2}>
                                    
         <Row>
           <Col>
            <Image
             src={val2.project_attachment_url}
            />
           </Col>
           <Col>
              {val2.project_attachment_name}
           </Col>
       </Row>
                                    
    </div>
   )
  })}
</Row>

I appreciate any help given to me regarding this matter, thank you!

red17
  • 77
  • 1
  • 12

1 Answers1

0

If you want to load image from local file on Windows, the path needs to be like this file://C:/Users/User/myproject/client/public/images/image-1648889022596.png (notice the 2 slashes instead of 3). The way you did it works on linux. This has been asked in another sf thread : https://stackoverflow.com/a/4090732/18714479.

However, the best practice is to use relative path instead of absolute path. For example: src="./public/images/image-1648889022596.png", assuming your project is on C:/Users/User/myproject/client/.

San Sigma
  • 1