CODEWITHSUNDEEP
javascriptvue.jswebpackwebpack-encore
Jean Paul Rumeau
Jean Paul Rumeau

Reputation: 433

Images in Vue component when using Webpack Encore

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.

Upvotes: 1

Views: 1528

Answers (3)

Tofandel
Tofandel

Reputation: 3565

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

Upvotes: 0

Jean Paul Rumeau
Jean Paul Rumeau

Reputation: 433

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

Upvotes: 1

Sabee
Sabee

Reputation: 1811

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

Upvotes: 1

Related Questions