Images

[Hego2017]

I can not link my images, because, ../../assets/images/logo/logo.png became to img/logo.png by /webpack/loaders/files.js

How can I change it or what is the syntax that I must to use for link my images?

[EvanAgee]

Hello @Hego2017 have a look at https://webpack.js.org/guides/asset-management/#loading-images

[Hego2017]

Thanks! I will read the article, in the meantime I am using Wodpress Media for images.

[austin880625]

This might be unrelated. But .png and .svg files are used in loader rules of both file.js and fonts.js. This seems to trigger this issue (since the problem disappears when I remove the svg test in fonts.js). I'm not sure should it be resolved in this project or loader, or even webpack.

[meerzulee]

I have same problem. But cannot configure webpack correctly. Also I have problem with loading custom fonts

[harrisonfm]

I figured this out with a custom .svg file. I think it would strongly benefit the project if an image like the VUE-WP logo was loaded thru webpack instead of an absolute url.

Add your images in src/assets/ and reference in component by import, and prepend a direct link to your theme base in front of it (as if you were using the php function get_theme_file_uri()): (Mine is Bolt.svg in this example)

<template>  
  <img :src="Bolt" />  
</template>
<script>  
import Bolt from '../../assets/bolt.svg';  
export default {  
    data() {  
      return {  
        Bolt: '/wp-content/themes/your-theme/dist/'+Bolt  
      };  
    }
</script>  

If working with .svg images, you also need to remove the .svg extension from webpack/loaders/fonts.js which conflicts and destroys svg files in dist/img/ that webpack/loaders/files.js picks up.

[wvffle]

Just tried to debug that and.. I think I found sort of an answer.

You can add a publicPath to the file-loader, though it depends on the theme directory. In theory, you can strip dirname to get it.

// loaders/file.js

module.exports = {
  test: /\.(png|jpg|gif|svg)$/,
  use: [
    {
      loader: 'file-loader',
      options: {
        name: 'img/[name].[ext]',
        publicPath: '/wp-content/themes/YOUR_THEME_NAME/dist'
      }
    }
  ]
}

[wvffle]

Should be closed