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

Question

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

但我收到以下错误：

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

我使用构建应用程序parcel-bundle，但我不使用webpack.
图像的路径是正确的，因为如果我使用静态链接，它工作得很好：

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

Answer 1

尝试这样做：

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

Answer 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>
      )
    }
  }

Answer 3

您可以控制以下步骤：

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

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