reactjs中的要求抛出找不到模块

Question

编辑：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);
       }
}

我得到错误：要求找不到模块'../products/templates/1.jpg'

有趣的事情。如果我使用 templates.jsx 文件在组件文件夹中添加产品文件夹。它有效。

这也不是语法错误，我可能在此处复制了问题。

回顾：如果我直接从 src jsx 调用 require(url)，它会找到图像。

如果我将 url 传递给另一个函数来尝试捕获。控制台记录正确的 url 但要求 throw 找不到模块。

这是一个反应限制吗？有解决办法吗？我是不是以错误的方式接近这个你？

Answer 1

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

如果你有一个公用文件夹，就像放在里面一样

public/images/image1.jpeg

然后在您的代码中，您可以通过以下方式访问它：

<img src="/images/image1.jpeg" />

只要您提供资产。

希望这会有所帮助！

Answer 2

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