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

I would recommend adding an alias in your webpack config

const path = require('path');
Encore
  .addAliases({
    '@images': path.resolve(__dirname, 'assets/images'),
  })
// ...

And then importing the image simply like this

<img alt="logo" width="240" height="60" src="@images/logo.png">