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-source
folderwithinnode_modules
itwillbeabletoloadtheimage,inTemplateHTML
ofVue
Irequirementthisway:
//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.