无法在反应中动态插入图像

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;