es6 require(变量)报错

Question

如果在vue里（使用的是官方vue-cli脚手架）想要在绑定style里设置背景图片需要require('/Path')。
此时，
1.require('/path')没问题。
2.如果require(path + 'imageName')引入一个变量加上一个字符串就会报warning，但可以正确引入图片。
3.如果require(path + imageName)只引入变量，则报错，且无法引入图片。

请问如何正确的使用require（）引入变量？

Answer 1

应该是 node 才支持这种动态引入，web 前端要写最好要写静态的模块名。

当然 webpack 的模块 api 也是支持动态名称的，Webpack 在处理动态名称模块名的时候，会直接将能识别的静态路径或者当前路径下的所有子文件都作为模块处理。例如：require('./image/ + imageName)，webpac 会将 image 路径下的所有文件都作为模块处理，做一个 Map 映射，编译后代码的 require 就是用 imageName 去匹配 Map 中是否存在对应文件。http://webpack.github.io/docs...

如果确实要这么写，那么可以使用 webpack 提供的 require.context，具体参考 webpack 官方文档

• CONTEXT

• http://webpack.github.io/docs...

至于 import 的话，webpack1 应该是要用 babel 编译，babel 当然是编译不通过啦！

Answer 2

这个是cmd模式的模块风格, 具体可以参考node的模块化

Answer 3

楼主解决了么
请帮我看下

           let body = response.data;
           this.imageUrl=require('../../../server/upload/pic/pic-151851582940557138839.jpg');(可以)
            this.imageUrl=require(body.data[0].thumb);                                       (报错 错误信息：Error: Cannot find module ".")

            if('../../../server/upload/pic/pic-151851582940557138839.jpg'===body.data[0].thumb) (确实相等)
            {
                console.log('equal')
                console.log(body.data[0].thumb);
            }