Images in Vue component when using Webpack Encore

Question

I'm building a Symfony web application and using Webpack Encore to compile VUE components for the frontend.

I have a VUE Component which includes an image tag. The problem is that webpack is not compiling the image src correctly.

My vue component is something like:

<template>
     <div class="demo-div">
         <img src="build/images/logo.png" />
     </div>
</template>

I'm using versioning for the images so logo.png is something like logo.39rut849hf.png on the build folder. The manifest file is there an the image exists within it with the right map.

But when the component renders it doesnt point to the versioned file but to the logo.png file which doesnt exists on the build folder.

How could I insert the image on the component and keep the versioning feature?

Thanks.

Answer 1

Recomend to you read this post. I think you can try to bind your src tag like this

<template>
 <div class="demo-div">
     <img :src="'build/images/logo.png'" />
 </div>

If is still not working try to include this vue image library

Answer 2

Finally what worked for me was to require the image directly on the src:

<img :src="require('../../../../images/bags.png')">

Note that the path is relative to the .vue component and points to the src image, and not the build image as this should be resolved dynamically by webpack.

Thanks