vue-html-loader (Webpack + Vue-loader) does not find the images in the root folder

3

I'm having difficulty attaching the images contained in src of HTML5 within a route made in vue-router , since Webpack does not find the image that is in the root of the project, / p>

C:.
|   index.html
|   gulpfile.js
|   webpack.config.js
|   
+---src-source
|   |   main.js
|   |   
|   \---view
|       |   *.vue
|       |   
|       \---guide
|           |   index.vue
|           |   *.vue
|       
\---image-source
    |   dashboard.png
    |   *.png

I use gulp to minify the files and it runs the webpack.config.js settings with this error

  

Lookingattheerror,itlooksfortheimageinthefollowingdirectory:C:\Users\iComputer\livcape2\node_modules\image-source

IfIsettheimage-sourcefolderwithinnode_modulesitwillbeabletoloadtheimage,inTemplateHTMLofVueIrequirementthisway:

//index.vue<imgalt="Dashboard" src="~image-source/dashboard.png" title="Dashboard">

Versions of NodeJS and npm are these:

NodeJS: v4.4.7
npm: 3.10.5

And finally, the setting made in webpack.config.js :

var webpack = require('webpack'),
    path = require('path');

module.exports = {
    entry: './src-source/main.js',
    output: {
        path: '/dist', // simplesmente diz ao Webpack qual caminho ele deve usar para salvar os arquivos finais.
        filename: 'build.js'
    },
    resolve: {
        root: path.resolve(__dirname)
    },
    //watch: true,
    module: {
        loaders: [
            {
                test: /\.js$/,
                // excluding some local linked packages.
                // for normal use cases only node_modules is needed.
                exclude: /node_modules|vue\/src|vue-router\//,
                loader: 'babel'
            },
            {
                test: /\.vue$/,
                loader: 'vue'
            },
            {
                test: /\.(png|jpg|gif)$/,
                loader:'url-loader?limit=8192'
            }
        ]
    },
    vue: {
        loaders: {
            js: 'babel'
        }
    },
    // example: if you wish to apply custom babel options
    // instead of using vue-loader's default:
    babel: {
        presets: ['es2015', 'stage-3'],
        plugins: ['transform-runtime'],
        comments: false
    },
    resolve: {
        extensions: ['', '.js', '.vue']
    }
}

I do not understand how to point to raiz of the project, if you have any plugins that solve this problem, I'm grateful.

    
asked by anonymous 11.08.2016 / 05:00

0 answers