How to insert images in react dynamically

1

I am trying to insert the image source by passing through the props but i am getting the error message

Uncaught Error: Cannot find module ‘…/4.0 - Assets/Images/video-list-1.jpg’

how can i solve it my code for the component where i want to insert is

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;

and the component i am transfering from is

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;

i had tried this as well but don’t know where i am doing the mistake
export const images = [
{
id: 1,
src:"…/4.0 - Assets/Images/video-list-0.jpg"
}
];
and then

import { images } from ‘./images’;

2

Don’t require the image. Simply set the url to the provided path: src={image}

3

And in your second, you have the parent directory as ... which is not right. Double period, not triple.

4

i tried removing the require and removing my extra . but it didn’t work