Vue-Loader无法渲染图像资产

问题描述

有人知道为什么我的Vue应用程序不渲染src / assets下放置的任何图像吗？

我有以下Bootstrap-Vue片段：

<b-col md="6" class="d-flex flex-column justify-content-center">
  <b-img center src="./growth-labs-logo.png" alt="Growth Labs logo" width="300px"></b-img>
</b-col>

此图像从不渲染，运行npm run dev时出现“找不到这些相关模块：”错误。

* ./google-sda-logo.png in ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"2545ef1d
-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--
0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Home.vue?vue&type=template&id=574ffcd8&scoped=true&

这是我的vue.config.js：

const path = require('path')
const PrerenderSPAPlugin = require('prerender-spa-plugin')

module.exports = {
  css: {
    loaderOptions: {
      scss: {
        additionalData: `@import "@/styles/_variables.scss"; @import "@/styles/app.scss"; @import "@/styles/_typography.scss";`
      }
    }
  },configureWebpack: () => {
    if (process.env.NODE_ENV !== 'production') return;
    return {
      plugins: [
        new PrerenderSPAPlugin(
            // Absolute path to compiled SPA
            path.resolve(__dirname,'dist'),// List of routes to prerender
            [ '/'],{
              // options
            }
        )
      ]
    }
  },chainWebpack: config => {
    config.module
        .rule('vue')
        .use('vue-loader')
        .loader('vue-loader')
        .tap(options => {
          options.transformAssetUrls = {
            img: 'src',image: 'xlink:href','b-avatar': 'src','b-img': 'src','b-img-lazy': ['src','blank-src'],'b-card': 'img-src','b-card-img': 'src','b-card-img-lazy': ['src','b-carousel-slide': 'img-src','b-embed': 'src'
          }

          return options
        })
  }
};

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）