vue项目使用require引入图片不能不显示

使用require引入图片不显示

简述：本人在vue项目中使用require引入图片后，页面不显示加载的图片，控制台报错结果如下。

GET http://localhost:8080/[object%20Module] 404 (Not Found)

1. 报错场景：在vue文件中使用require加载图片。

   export default {
     name: 'tag',
     data() {
       return {
         login: require('@/assets/login.jpg')
       }
     }
   }
   

2. 问题原因：在url-loader的4.1版本中，有一个属性esModule

   根据官方文档 (opens new window)的介绍意思是：默认情况下，文件加载器会使用ES模块语法，在某些情况下，使用ES模块是有益的，不过你也可以将`esModule的属性设置为关闭，来启用commonJS模块的语法。

   module.exports = {
     module: {
       rules: [
         {
           test: /\.css$/,
           use: [
             {
               loader: 'url-loader',
               options: {
                 esModule: false,
               },
             },
           ],
         },
       ],
     },
   };
   

3. 解决方法：

   • esModule：false时使用require引入图片；

   • esModule：true时使用import引入图片；

     <script>
     import login from '@/assets/login.jpg'
     export default {
       name: 'tag',
       data() {
         return {
           login: login
         }
       }
     }
     </script>