In the previous article, I walked you through how I set up file upload functionality that allows users to upload a file from their media library and save it to the Whinst backend. In this article, I'll walk you through how I set up functionality that allows saved images to be displayed on the front end for users to see.
Displaying Images🖼
When an image is uploaded it is saved in a folder in the backend. For these images to be dynamically displayed, the image names need to be stored in the database to show the frontend which image to get when checking the files folder. I did this by creating a simple image field in the database object which stores the name of the image. For static files such as images to be served to the frontend via a URL or path some configuration is needed, this configuration just highlights the folder where static files such as images within the node server are found. The code below shows how an image name can be saved to the database and how static file serving configuration can be implemented.
//Middleware configuration for serving static files
app.use('/media',express.static('media'))
//When the image is saved to the folder the name of the image is returned and saved to its database object
app.post("/api",upload.single("image"),async(req,res)=>{
const image = req.file.filename
try{
const saveImage = await pool.query("INSERT INTO image_object (image) VALUES ($1) RETURNING *",
[image],(errors,results)=>{
returnedItem.map((item)=>{
res.json(item)
})
})
}
})
To show or display these images on the frontend I used a basic image tag and set the src or source property to the URL or path of the correct image. The code below shows how an image can be displayed on the front end given a URL or path.
<Image
fill
alt='an Image'
src={`http://localhost:5000/images/image_name`}
/>
With image upload and display functionality set up, I'm now a step closer to completing the Whinst web app. In the next article, I'll write about how I set up video display functionality. Thank you for reading🙏.