How to insert images in react dynamically

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} =;
    <div className="side-video-content">
      <div className="side-video-content-img">
        <img src={require(image)} alt=""/>
      <div className="side-video-content-title">

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}/>

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’;

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

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

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