I made a nuxt 2 app that allow user to upload images from a page. I’ve installed “multer”: “^1.4.5-lts.1”, in my project and everything work fine locally.

Instead on my vps , after deploy if I try to read the image, i have an error ( not found ). I’ve checked if image exist in folder , and the image was there. But if i try to type the path of image on browser, i will see error not found. Locally it work

This is my images.js file where I upload the images from express and multer

const express = require('express');
const router = express.Router();
const imageController = require('../controllers/image');
const multer = require('multer');
const path = require('path');


let pathUpload = 'assets/img/';


const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, pathUpload);
  },
  filename: function (req, file, cb) {
    let fullpath = Date.now() + '-' + file.originalname;
    
    cb(null, fullpath);
  }
});
const upload = multer({ storage: storage });

router.post('/upload', upload.single('image'), imageController.uploadImage);
router.get('/:id', imageController.getImage);
router.get('/', imageController.getAllImage);

module.exports = router;

This is the page where i need to show all images :

<template>
    <div>
            <div class="img-list"
            v-for="(image,i) in this.images_list"
            :key="i + image"
            >
            <!-- Result of require is `~/assets/img/image_1.png` -->
                <img :src="require(`~/assets/img/${image.path}`)" />
            </div>
    </div>
</template>

<script>


export default {
    data: () => ({
        selectedFile: null,        
    }),
  
    async fetch({store, params}) {
        // get images 
        await store.dispatch('fetchAllImages')
    },
    computed: {
        images_list() {
            return this.$store.state.images
        },
    },      
    methods: {
 
    }
}
</script>

If i type the path like below, it work, otherwise with dynamic code not work.

<img :src="require('~/assets/img/image_1.png')" />

There are a way to read dynamic images from assets or static folder ?
In my vps the images was in correct path, like locally, but if i type the path on url, I can’t reach the images.

Ex.

• www.websiteurl.com/_nuxt/assets/img/images_1.png
• www.websiteurl.com/.nuxt/assets/img/images_1.png
• www.websiteurl.com/assets/img/images_1.png