Reference to assets from dist folder with vue + webpack in electron app - vue.js

Question

I am using vuejs + webpack + electron.
I have hard time retrieving the path to my asset.
My project structure is the following:
/my-project
/app
/components
componentA.vue
...
App.vue
main.js
/dist
/assets
/icons
/a.png
package.json
webpack.config.js
I load the static asset in the dist folder with file-loader.
My webpack.config.js looks like:
var path = require('path')
var webpack = require('webpack')
module.exports = {
entry: './app/main.js',
output: {
path: path.resolve(__dirname, './dist'),
filename: 'build.js'
},
module: {
rules: [
{
test: /\.vue$/,
use: {
loader: 'vue-loader',
}
},
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
]
},
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['es2015'],
plugins: ['transform-runtime']
}
}
},
{
test: /\.(jpe?g|png|gif|svg|ico)$/,
exclude: /node_modules/,
loader: "file-loader?name=/assets/icons/[name].[ext]"
},
]
},
resolve: {
alias: {
vue: 'vue/dist/vue.js'
}
},
plugins: [
new webpack.ExternalsPlugin('commonjs', [
'electron'
])
],
node: {
__dirname: true,
fs: 'empty',
module: 'empty',
net: 'empty',
tls: 'empty'
},
externals: ["fs"]
}
In the file componentA.vue I am trying to do the following:
<template>
<div>
<img :src= "link">
</div>
</template>
<script>
import Aa from '../assets/icons/a.png'
export default {
data () {
return {
link: '',
}
},
created() {
this.link = Aa;
},
...
</script>
But I have the following error:
Failed to load resource: net::ERR_FILE_NOT_FOUND file:///a.png
The images appear loaded in the correct path in the dist/assets/icons but electron is trying to load it from
file:///assets/icons/a.png
I'm new to webpack and tried to load it in different ways but i can't make it work, can you help me in resolving this issue ? Thanks a lot !