Question

使用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下有我的图像，并在那里有它们的副本。

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

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

0 个答案: