Vue + webpack project img cannot load static src

Question

In my vue (2.0) + webpack project, I configure vue-html-loader, but in my .vue files, the img tag cannot load static src images. Below is my webpack configurator:

module: { loaders: [ ... { test: /\.html$/, exclude: /node_modules/, loaders: ['html', 'html-minify'] } , { test: /\.vue$/, loader: 'vue' } ... ] }, vue: { ... html: { root: path.resolve(__dirname, './source/static'), attrs: ['img:src', 'img:srcset'] }, loaders: { css: ExtractTextPlugin.extract("css"), sass: ExtractTextPlugin.extract("css!sass") } }, resolve: { root: [ path.resolve('./source') ], extensions: ['', '.js', '.json', '.scss', '.html', '.css', '.vue'], alias: { 'vue': 'vue/dist/vue.js' } }, 

Below is my .vue file:

 <img src="/web/img/ [e-mail] " srcset="/web/img/ [e-mail] " /> 

My browser always gives a 404 error. Has someone got the same problem?

Answer 1

I have the following in my webpack configuration that works for me:

  module: { rules: [ { test: /\.vue$/, loader: 'vue', options: vueConfig }, { test: /\.js$/, loader: 'babel', exclude: /node_modules/ }, { test: /\.(png|jpg|gif|svg)$/, loader: 'url', options: { limit: 10000, name: '[name].[ext]?[hash]' } } ] } 

I have images in the src/assets folder that I can get and display without any specific settings.

Answer 2

I would add an alias for your static img directory in your webpack aliases, i.e.

 resolve: { ... alias: { 'vue': 'vue/dist/vue.js', 'img': path.resolve(__dirname, '../web/img') // or wherever it is located relative to this file } } 

now you can reference static images via ~img , i.e.

 <img src="~img/ [e-mail] " srcset="~img/ [e-mail] " /> 

---

To make sure you can parse the above in your html, you need to add the vue-html loader to your webpack configuration:

 module: { loaders: [ ... { test: /\.html$/, loaders: 'vue-html' } 

I would just replace your current html downloader above.

However, all this aside - because of the complexity of the forests, the explicit webpack vue application I would strongly recommend installing vue-cli : https://github.com/vuejs/vue-cli

Then you can simply run the tested and valid web package environment:

https://github.com/vuejs-templates/webpack

Just copy the application into it. You will probably have to do a bit of refactoring, but saving time on tuning is absolutely worth it.