reactjs中的Require引发找不到模块

时间:2019-08-31 15:32:12

标签: reactjs require

编辑:Noob在这里提供帮助。

我已经检查了很多类似的问题,但没有一个是安静的。

React正在从express接收对象数组。循环访问,获取每个对象图像链接并将其添加到源中。

这是原始代码

  {this.state.currentTemplates.map((items, pos) => {
            return (
              <div className={`template `}>
                <img src={require(`${items.link}1.jpg`)} />
                <p>{items.name}</p>
                <div className="buy">buy</div>
              </div>

如果图像以这种方式存在,则require将找到它并且它将起作用。

但是如果我向另一个函数发送请求以检查图像是否首先存在,例如尝试捕获。

 <div className={`template `}>
//sending url to another function. Also I can put the function outside of class and just call without 'this' and it does not make any difference.

                <img src={this.checkUrl(`${items.link}1.jpg`)} />
                <p>{items.name}</p>
                <div className="buy">buy</div>

例如:

 checkUrl(url) {
       console.log(url); // receive right url '../products/templates/a.jpg'
       try {  
 // try will require the right url but module cannot found it and it goes to catch. Now I can also put it in a variable var a= require(url) and it does not make a difference

          require(url);
console.log("it works "); // it never gets to here.
          return url; // this may not work once returned but it does not get to here.
      }catch(e) {
//react jump to catch with "cannot find module '../products/templates/a.jpg'"
         console.log(e);
       }
}

我收到错误消息:require找不到模块'../ products / templates / 1.jpg'

有趣的事情。如果我将产品文件夹添加到带有templates.jsx文件的组件文件夹中。可以。

这也不是语法错误,我可能在这里做了一个错字重复该问题。

回顾:如果我直接从src jsx调用require(url),它将找到图像。

如果我将url传递给另一个函数进行尝试捕获。控制台日志正确的URL,但要求抛出找不到模块。

这是一个反应限制吗?有没有解决的办法?我是用错误的方式接近你吗?

2 个答案:

答案 0 :(得分:1)

您以错误的方式使用它,必须提供图像,而不是将其作为模块。它必须包含在您的静态资产中,或包含在其他服务器中的外部URL。这是常见的模式,请不要使其复杂化。

如果您有公用文件夹,只需将其放在

{"date": {"0": "2003-06-30", "1": "2003-07-01", "2": "2003-07-02", "3": "2003-07-03", "4": "2003-07-04", "5": "2003-07-07", "6": "2003-07-08", "7": "2003-07-09", "8": "2003-07-10", "9": "2003-07-11"}, "open": {"0": 37.1, "1": 37.09, "2": 38.17, "3": 40.6, "4": 39.1, "5": 39.6, "6": 42.0, "7": 41.3, "8": 41.2, "9": 39.6}, "max": {"0": 37.4, "1": 38.1, "2": 38.82, "3": 40.6, "4": 39.26, "5": 41.0, "6": 42.0, "7": 41.3, "8": 41.2, "9": 39.97}, "min": {"0": 36.92, "1": 37.09, "2": 38.1, "3": 38.81, "4": 38.75, "5": 39.6, "6": 40.7, "7": 40.81, "8": 40.05, "9": 39.3}, "close": {"0": 37.08, "1": 38.05, "2": 38.69, "3": 39.0, "4": 39.26, "5": 41.0, "6": 41.19, "7": 41.22, "8": 40.05, "9": 39.91}, "stock_id": {"0": 50, "1": 50, "2": 50, "3": 50, "4": 50, "5": 50, "6": 50, "7": 50, "8": 50, "9": 50}, "target_next_1_day": {"0": 38.05, "1": 38.69, "2": 39.0, "3": 39.26, "4": 41.0, "5": 41.19, "6": 41.22, "7": 40.05, "8": 39.91, "9": 40.66}, "target_next_2_day": {"0": 38.69, "1": 39.0, "2": 39.26, "3": 41.0, "4": 41.19, "5": 41.22, "6": 40.05, "7": 39.91, "8": 40.66, "9": 40.19}, "target_next_3_day": {"0": 39.0, "1": 39.26, "2": 41.0, "3": 41.19, "4": 41.22, "5": 40.05, "6": 39.91, "7": 40.66, "8": 40.19, "9": 40.85}, "target_next_4_day": {"0": 39.26, "1": 41.0, "2": 41.19, "3": 41.22, "4": 40.05, "5": 39.91, "6": 40.66, "7": 40.19, "8": 40.85, "9": 39.8}, "target_next_5_day": {"0": 41.0, "1": 41.19, "2": 41.22, "3": 40.05, "4": 39.91, "5": 40.66, "6": 40.19, "7": 40.85, "8": 39.8, "9": 39.92}}

data = pd.DataFrame(data)
X = data[['open', 'max', 'min', 'close']]
Y = data[['target_next_1_day', 'target_next_2_day', 'target_next_3_day', 'target_next_4_day', 'target_next_5_day']]

def customer_obj(target, predict):
    gradient = ????
    hess = ????
    return gradient, hess
clfpre = xgb.XGBRegressor(n_estimators=5, objective =customer_obj)
clf = MultiOutputRegressor(clfpre).fit(X.values, Y.values)

然后,您可以在代码中通过以下方式访问它:

int numSumAddUp = Arrays.asList(num1,num2,num3,num4,num5,num6).stream().mapToInt(Integer::parseInt).sum();

提供您的资产。

希望这会有所帮助!

答案 1 :(得分:1)

首先查看文件夹所在的行路径,以检查是否正确使用了此<img src={ $ {items.link} 1.jpg } /> 再次,如果该图像是在网络上找到的外部图像,那将没有问题,但是如果该图像是内部存储,请检查您的正确路径