在我的 vue(2.0)+ webpack 项目中,我配置了 vue-html-loader,但是在我的 .vue 文件中 img 标签无法加载静态 src 图片。 下面是我的 webpack 配置:
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'
}
},
下面是我的 .vue 文件:
<img src="/web/img/sieleLogo@1x.png" srcset="/web/img/sieleLogo@2x.png" />
我的浏览器总是出现 404 错误。有人遇到同样的问题吗?
最佳答案
我的 webpack 配置中有以下内容,对我有用:
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]'
}
}
]
}
我在 src/assets
文件夹中有图像,我可以在没有任何特定设置的情况下访问和显示这些图像。
关于javascript - vue + webpack项目img无法加载静态src,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40733102/