React 报错 Critical dependency: the request of a dependency is an expression

我在img用require引入图片路径时报的这个错，MD，我真是废了吗

• 方法一不行：

const rotationImg = [
    {name: "jack", picUrl: "img1.jpeg"},
    {name: "duke", picUrl: "img2.jpeg"},
    {name: "skip", picUrl: "img3.jpeg"}
];
rotationImg.map((item, index) => {                  
    return (
        <div key={index}>
            <a className='carName'>{item.name}</a> 
            <img src={require(item.picUrl)} alt="" />
        </div>
    )
})

• 方法二不行：

// 一开始我还以为是es6的模板字符串的问题，导致webpack报错
<img src={require(`${item.picUrl}`)} alt="" />

• 方法三泥马还是不行：

// 我以为<img> require 调用中使用变量或表达式时，Webpack 无法静态解析它们并导入整个包
rotationImg.map((item, index) => {   
    let img = item.picUrl;
    return (
        <div key={index}>
            <a className='carName'>{item.name}</a> 
            <img src={require(img)} alt="" />
            <img src={require(`${img}`)} alt="" />
        </div>
    )
})

• 这样最直接的，当然可以

// 这样铭文引入是完全没毛病，路径稳稳的，前提webpack的loader也配置好了
<img className='rotationChart-img' src={require("../../assets/images/img2.jpeg")} alt="" /> 

• 一开始小弟如我 还以为是 webpack 版本问题
• require接收了一个变量，会报上面的警告，接收一个写死的字符串值则没有警告！
• require用于引入模块、 JSON、或本地文件，但是不支持直接传入变量

const rotationImg = [
    {name: "jack", picUrl: "img1.jpeg"},
    {name: "duke", picUrl: "img2.jpeg"},
    {name: "skip", picUrl: "img3.jpeg"}
];

// 我这样就可以了，握日真的是 ^^……
<img className='rotationChart-img' src={require(`../../assets/images/${img}`)} alt="" />

• 还有一种方法也行，最近才发现的

// 这样也可以直接显示图片，不用require()
// 因为图片路径直接是网上路径,http://xxxxxxx
<img src={configList[0].picUrl} />

参考文献：blog.csdn.net/u013727805/…

结语

前端react QQ群：788023830 ---- React/Redux - 地下老英雄

前端交流QQ群：249620372 ---- FRONT-END-JS前端

（我们的宗旨是，为了加班，为了秃顶……，仰望大佬），希望小伙伴们加群一起学习