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

Question

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

但是我得到了以下错误：

Cannot find module '../../../assets/skillName.png'

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

<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.You can remove skillName name from json data.then see other images.if 你可以显示其他图片，你的图片名称不正确。因为你的代码是正确的，但可能是个小问题。

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

how to Import an image in React with parcel-bundle

image

jsx

reactjs

parceljs