使用b-carousel BootstrapVue组件时,我无法显示图像(使用URL时效果很好)。我收到vue-loader错误:
错误 ./~/vue-loader/lib/template-compiler?{"id":"data-v-42d9991b","hasScoped":false,"optionsId":"0","buble":{"transforms“: {}}}!./〜/ vue-loader / lib / selector.js?type = template&index = 0!./ ClientApp / components / smHome.vue 找不到模块:错误:无法解析“ images / SMMainWorker1.png” 'C:\ Source \ repos \ McAspnetCoreVueStarter \ content \ ClientApp \ components' @ ./~/vue-loader/lib/template-compiler?{"id":"data-v-42d9991b","hasScoped":false,"optionsId":"0","buble":{"transforms“: {}}}!./〜/ vue-loader / lib / selector.js?type = template&index = 0!./ ClientApp / components / smHome.vue 19:38-73 @ ./ClientApp/components/smHome.vue @ ./ClientApp/app.js @ ./ClientApp/boot-app.js @ multi event-source-polyfill webpack-hot-middleware / client?path = __ webpack_hmr&dynamicPublicPath = true ./ClientApp/boot-app.js
这些图像确实存在于ClientApp \ components \ images
下我尝试了不同的方法,并在此处找到了官方文档: https://bootstrap-vue.js.org/docs/reference/images/
这是我的代码:
:
<div class="row">
<div class="col-6">
<b-carousel id="carousel1">
<b-carousel-slide img-src="~/images/SMMainWorker1.png">
<button class="btn btn-large justify-content-center">Get a Job</button>
</b-carousel-slide>
</b-carousel>
</div>
我的webpack.config.js具有以下内容:
module: {
rules: [
{
test: /\.vue$/, include: /ClientApp/, loader: 'vue-loader',
options: {
transformToRequire: {
'img': 'src',
'image': 'xlink:href',
'b-img': 'src',
'b-img-lazy': ['src', 'blank-src'],
'b-card': 'img-src',
'b-card-img': 'img-src',
'b-carousel-slide': 'img-src',
'b-embed': 'src'
}
}
}
]
},
我的项目文件夹结构是 ClientApp /组件/图像
我最初在ClientApp / images下有我的图像,并在那里有它们的副本。
任何评论/建议均受到高度赞赏。谢谢!。