I am working on a project that uses webpack and vue.js. I encountered an issue when trying to add an image to the vue template using src '/images/imageName.png', which resulted in a 404 error. How can I adjust the configuration to recognize absolute paths?
This is my root path structure:
../public
- myProject
-- webpack.config.js
-- src
--- app.vue
--- app.js
-- images
--- various image folders
In my Vue template, I utilize an absolute path for src:
<img src="/images/apps/small-logo/android-text-logo.png" alt="img">
output: {
path: path.resolve(__dirname, '../../public'),
publicPath: '/',
filename: '[name].js'
},
test: /\.(png|jpg|svg)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[path][name].[ext]'
}
}
]