не может динамически вставлять изображение в реакцию

Question

Я пытаюсь вставить источник изображения, пропуская реквизиты, но получаю сообщение об ошибке

Неперехваченная ошибка: не удается найти модуль '../4.0 - Assets / Images / video-list-1 .jpg '

как я могу решить эту проблему, мой код для компонента, в который я хочу вставить, -

const VideoComp = (props) => {
  const {title, channel, image} = props.data;
  return(
    <div className="side-video-content">
      <div className="side-video-content-img">
        <img src={require(image)} alt=""/>
      </div>
      <div className="side-video-content-title">
        <h4>{title}</h4>
        <p>{channel}</p>
      </div>
  </div>
  );
}

export default VideoComp;

, и я перехожу из этого компонента

class SideVideo extends Component {
  state = {
    sideVideo: {
      id: 1,
      title: "Become A Travel Pro In One Easy Lesson",
      channel: "Todd Welch",
      image: "../4.0 - Assets/Images/video-list-1.jpg",
    },
  };
  render() {
    return (
      <div className="side-video-container">
        <h5>Next Video</h5>
        <VideoComp data={this.state.sideVideo}/>
      </div>
    );
  }
}

export default SideVideo;

Answer 1

Ciao, попробуйте определить js со всем необходимым изображением, например:

// ../4.0 - Assets/Images/images.js
const images = {
 myimage: require("./video-list-1.jpg"),
 ...
}
export default images;

Затем в SideVideo:

import images from "../4.0 - Assets/Images"

 class SideVideo extends Component {
  state = {
    sideVideo: {
      id: 1,
      title: "Become A Travel Pro In One Easy Lesson",
      channel: "Todd Welch",
      image: images.myimage,
    },
  };
  render() {
    return (
      <div className="side-video-container">
        <h5>Next Video</h5>
        <VideoComp data={this.state.sideVideo}/>
      </div>
    );
  }
}

И в VideoComp :

const VideoComp = (props) => {
  const {title, channel, image} = props.data;
  return(
    <div className="side-video-content">
      <div className="side-video-content-img">
        <img src={image} alt=""/>
      </div>
      <div className="side-video-content-title">
        <h4>{title}</h4>
        <p>{channel}</p>
      </div>
  </div>
  );
}

export default VideoComp;