无法为b-carousel BootstrapVue组件加载静态图像

时间:2018-07-20 15:41:24

标签: webpack vue.js vue-loader bootstrap-vue

使用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/

这是我的代码:

    我的smhome.vue组件中的
  • <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下有我的图像,并在那里有它们的副本。

任何评论/建议均受到高度赞赏。谢谢!。

0 个答案:

没有答案