react 中img路径报错

Question

请问，在jsx代码中例如
<img src={require("../../images/productIntroduce/u1154.svg")}/>就不会报错
但是如果先定义一下
const url="../../images/productIntroduce/u1154.svg"；
<img src={require(url)}/>
就会报错the request of a dependency is an expression，这是什么原因？

Answer 1

require加载对象也就是括号内的对象不能是个表达式吧

Answer 2

the request of a dependency is an expression是个警告不是错误。

你试试用绝对路径应该是work的，猜测是webpack打包时处理require时会对相对路径做特殊处理，而当你代入的是一个变量时，因为打包时还未执行程序，所以变量还是空的，所以这里面的变量就没有执行特殊处理。

如果非得使用变量，你可以试试这样做

const url="../images/productIntroduce/u1154.svg"；
<img src={require("../" + url)}/>

Answer 3

require() 里的必须是字符串