In my VueJs 3 project, I am working with a list of PNG images stored in the src/assets/pngs/ directory. Within my Vue component, I use a For loop to dynamically create the list by setting the image name as the source for the img tag. This implementation works perfectly in development mode.
<div v-for="item in items" :key="item.id">
<div class="card">
<p class="hint">{{ item.name }}</p>
<img :src="makeImgPath(item.img_name)" alt="">
</div>
</div>
methods: {
makeImgPath(imgName) {
return '/src/assets/pngs/' + imgName + '.png';
}
}
However, when I build the application using npm run build, all the images in the list result in a 404 error. Upon further investigation, I discovered that the pngs folder and its contents are not being copied to the dist/asstes/ directory. I am seeking guidance on why this is happening and how I can ensure that the images are successfully copied to the dist folder.
Thank you in advance for your assistance,
Max.