'Can't display images in public folder without "npm run build"

I want to display array of images in production mode after upload images in public folder outside src folder. I don't want use npm run build everytime and want to display images on the fly.

I have the following architecture:

dist
     - img
   src
     - assets
       - img
   public
     - img
       -paintings

Here I want to display my images

<v-row justify="center" class="mt-4">
  <v-col
    v-for="(image, idx) in downloadedImages.slice().reverse()"
    :key="idx"
    class="d-flex child-flex"
    cols="2">
    <v-card>
      <v-img
        :src="imageUrl(image)"
        height="200px"
      >
        *** some code ***
      </v-img>
    </v-card>
  </v-col>
</v-row>

with methods

methods: {
          imageUrl(imgName){
              return 'public/img/paintings/'+imgName)
          },
          getDownloadedImages() {
            return axGetDownloadedImages()
              .then(response => {
                this.downloadedImages = response.data
              })
          },
}

Where downloadedImages = ['img1.jpg', 'img2.jpg', 'img3.jpg', ... , imgN.jpg]

When images uploaded I see only white <v-card> without image and page update isn't help me. But I see uploaded images after use npm run build.

I read that public folder outside src isn't compile and I can display images but this is not happening

Where I have mistake?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source