vue中,引入动态路径的图片,不显示图片

昵称
  • 196

webpack配置如下:

const path \= require('path');  
const VueLoaderPlugin \= require('vue-loader/lib/plugin');  
  
module.exports \= {  
  module: {  
  rules: \[  
 {  test: /\\.vue$/,  
  loader: 'vue-loader'  
  },  
 {  test: /\\.js$/,  
  loader: 'babel-loader'  
  },  
 {  test: /\\.css$/,  
  loader: 'style-loader!css-loader'  
  },  
 {  test: /\\.less$/,  
  loader: 'style-loader!css-loader!less-loader'  
  },  
 {  test: /\\.(gif|jpg|png|woff|svg|eot|ttf)\\??.\*$/,  
  loader: 'url-loader',  
  options: {  
  limit: 10000  
  }  
 }, {  test: /\\.(html|tpl)$/,  
  loader: 'html-loader'  
  }  
 \] },  
  resolve: {  
  alias: {  
  '@': path.join(\_\_dirname, '../src'),  
  vue: 'vue/dist/vue.esm.js'  
  },  
  extensions: \['.js', '.vue', '.json'\]  
 },  
  plugins: \[new VueLoaderPlugin()\]  
};

然后再vue组件中这样引入:
style['background-image'] = 'url(' + require(`./i/${this.type}.png`) + ')';

我把style打印出来,结果控制台出现:
{"background-image":"url([object Module])"}

没有显示图片信息,请问是什么原因?

回复
阅读 2.5k
1 个回答
✓ 已被采纳

url-loader的options里面添加esModule: false

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏