Image 如何在React with parcel bundle中导入图像

我想添加一个带有require语句的图像

但我得到了以下错误：

找不到模块“../../../assets/skillName.png”

我使用

packetbundle

构建应用程序，而不使用

webpack

图像的路径是正确的，因为如果我使用静态链接，它工作得很好：

<img src={require(`../../../assets/skillName.png`)}/>

试着这样做：

{Object.keys(this.props.skillset).map((skill) => {
    let source = require(`../../../assets/${skill}.png`);
     return (
       <div key={skill}>
         <img src={source}/>
        </div>
     )
   })}

{Object.keys（this.props.skillset）.map（（skill）=>{
让source=require（`../../../assets/${skill}.png`）；
返回(
)
})}

试着这样做：

{Object.keys(this.props.skillset).map((skill) => {
    let source = require(`../../../assets/${skill}.png`);
     return (
       <div key={skill}>
         <img src={source}/>
        </div>
     )
   })}

{Object.keys（this.props.skillset）.map（（skill）=>{
让source=require（`../../../assets/${skill}.png`）；
返回(
)
})}

我这样做了，它对我有效，尝试不使用require，并在图像源中给出绝对url，我认为在您的示例中应该是-

window.location.host

+相对url

  class App extends React.Component {
    constructor(props){
      super(props);
    }
    render() {
      return (
        <div>
          {[100, 200].map((len) => {
             return (
               <div key={len}>
                 <img src={`https://placeimg.com/${len}/${len}/any`}/>
                </div>
             )}
           )}
        </div>
      )
    }
  }

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
{[100200].map（（len）=>{
返回(
)}
)}
)
}
}

我这样做了，它对我有效，尝试不使用require，并在图像源中给出绝对url，我认为在您的示例中应该是-

window.location.host

+相对url

  class App extends React.Component {
    constructor(props){
      super(props);
    }
    render() {
      return (
        <div>
          {[100, 200].map((len) => {
             return (
               <div key={len}>
                 <img src={`https://placeimg.com/${len}/${len}/any`}/>
                </div>
             )}
           )}
        </div>
      )
    }
  }

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
{[100200].map（（len）=>{
返回(
)}
)}
)
}
}

您可以控制以下步骤：

1.really skillName.png图像放置资产文件夹

2.您可以从json数据中删除skillName。然后查看其他图像。如果您可以显示其他图像，则您的图像名称不正确。

---

因为您的代码是正确的，但可能是个小问题。

您可以控制以下步骤：

1.really skillName.png图像放置资产文件夹

2.您可以从json数据中删除skillName。然后查看其他图像。如果您可以显示其他图像，则您的图像名称不正确。

---

因为您的代码是正确的，但可能是一个小问题。

尝试将代码添加到JSFIDLE或沙盒中，这样会更容易调试。我发现了我的错误包。我没有为此组件中的所有图像添加improt。现在它工作了，然后将其标记为已解决的答案。这让我很困惑，虽然这个解决方案不起作用，但它确实起作用了。尝试将代码添加到JSFIDLE或沙盒中调试会更容易。我发现了我的错误。我没有为此组件中的所有图像添加improt。现在它工作了，然后将其标记为已解决的答案。这让我很困惑，虽然这个解决方案不起作用，但它确实起了作用。