如何使用 parcel-bundle 在 React 中导入图像答案

【问题标题】：how to Import an image in React with parcel-bundle如何使用 parcel-bundle 在 React 中导入图像
【发布时间】：2018-06-07 11:23:11
【问题描述】：

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

但我收到以下错误：

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

我使用parcel-bundle 构建应用程序，但我不使用webpack。
图片的路径是正确的，因为如果我使用静态链接，效果很好：

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

【问题讨论】：

标签： image reactjs jsx parceljs

【解决方案1】：

尝试这样做：

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

【讨论】：

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

【解决方案2】：

https://codepen.io/smilesaayush/pen/oyzMZd

我是这样做的，它对我有用，尝试不使用 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>
      )
    }
  }

【讨论】：

【解决方案3】：

你可以控制步骤：

1.really SkillName.png 图片放置assets文件夹。

2.您可以从json数据中删除skillName名称。然后查看其他图像。如果您可以显示其他图像，则您的图像名称不正确。因为您的代码是正确的，但可能是小问题。

【讨论】：