require()怎么加变量

Question

使用require导入图片只能写图片的地址？如果我图片的url是写在json文件中的，只能用以下方式获取图片吗？

---

{this.props.data.map((item, index) => {
                    const url = item.img;
                    var image = require("../../"+url+".jpg");
                    return <div key={item.key}>
                        <a href="#" target="_blank">
                            <img src={image} className="img_logo"/>
                        </a>
                    </div>
                })}

这样的话json数据不能写它的后缀名

---

{
    "image":[{
      "key":"1",
      "img":"static/images/Logo"
    }]
  }

如果我改成"img":"static/images/Logo.jpg",而require（"../../"+url）图片就显示不出来。

---

这样就有个问题，用户给你的json数据文件中图片的url肯定是有后缀名的，而后缀名写在json里就渲染不出来。应该怎样修改代码？

Answer 1

任何打包器，做的都是静态分析，所以require里面的东西一般必须是个常量，或者至少要给出足够的信息来判别文件类型。如果把".jpg"后缀名删掉，require的东西完全在运行时决定，打包器就没法知道类型，自然会挂掉。

解决方案：
require.context了解一下，提前指定好文件类型是.jpg就行了

https://webpack.docschina.org...

Answer 2

没看过require源码，自己实践了一种简单方式。有大神看到可以讲解下原理哦

var src = "/images/foo";
const FOO = require("${src}.png");