angular does not find an uploaded image

Question

The scenario is simple. Use a form to upload an image and if it is successfully uploaded, refresh a photogallery. I use angular6 and ng-carousel. All the system is locally set i

Answer 1

Angular uses AOT(Ahead of Time) compiling which will read the already existing files that are available when compiling. The uploaded images are to be saved in the server-side code, for example: in a folder server/uploads.

When the API to avail the links of the images are called, the response can have the baseURL/file-name. For the development server in your case, it would be localhost:3000/uploads/unsplash.jpg. Make sure you have made the uploads folder static.

In case if you are using a node JS (Express) in the server-side, here's an example

const fs = require('fs-extra')
app.use(express.static(__dirname + '/uploads'));

app.get('/gallery',(req, res) => {
    fs.readdir(('./uploads'),(err,files) => {
            let filePath = []
            files.forEach(filename => {
                filePath.push('http://localhost:3000/uploads/' + filename)
            })
            res.json({
                files: filePath
            })
    })
})

app.listen(3000, () => {
    console.log('Server started on port:', 3000)
})

This will provide you with the paths of the images in the uploads folder and can be viewed in the client-side unlike storing it in the assets folder