Vue Js images are not copied to dist during build process

Question

In a VueJs 3 project I have a list of PNG images. I put the PNG images under src/assets/pngs/. In my Vue componente I build the list with a For loop and put the image name in the img src. In dev mode this works fine.

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

When I build the application with npm run build I get a 404 for all images in the list when built. I have also noticed that the pngs folder and therefore the images are not copied to dist/asstes/. Why is this so and what can I do so that the pictures are copied to the dist folder. Thanks in advance, Max.

Answer 1

yes, dynamic value image path's are not coping to dist folder in build process, I suggest to place move images into public folder and refer from it..