'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 |
|---|
