Как импортировать изображение в React с помощью parcel-bundle

Question

Я хочу добавить изображение с требованием.

Но я получил следующую ошибку:

Не могу найти модуль '../../../assets/skillName.png'

Я создаю приложение, используя parcel-bundle, и не использую webpack.
Путь к изображению правильный, потому что еслиЯ использую статическую ссылку, она хорошо работает:

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

Answer 1

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 2

вы можете контролировать шаги:

1.really skillName.png image Поместите папку ресурсов.

2.Вы можете удалить имя скилла из данных json. Затем посмотрите другие изображения. Если вы можете показать другое изображение, имя вашего изображения будет неправильным.потому что ваш код правильный, но может быть маленькой проблемой.

Answer 3

Попробуйте сделать это так:

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