Question

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

但是我收到了以下错误：

找不到模块＆＃39; ../../../ assets / skillName.png＆＃39;

我使用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名称。然后查看其他图像。如果您可以显示其他图像，则您的图像名称不正确。因为你的代码是正确的，但可能是小问题。

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

3 个答案: