循环导入图像

Question

我要完成的工作是从正确的目录导入每个文件。 我的后端代码将文件保存到images目录，而我的前端目录是我存放React.js代码的位置。

我的目录结构可以在下面看到。

-- Backend
   -- backend code
-- Frontend
   -- frontend code
-- images
   -- user_1
      -- People.jpg
   -- user_2
      ...

如您所见，我正在从后端获取路径。 imagePath将类似于以下“ ../images/user_1/People.jpg”。 我看到另一个stackoverflow post使用require关键字将图像存储在const变量中，但是使用该方法却收到错误。

@observer
export default class SnapCapsule extends React.Component {
  componentDidMount() {
    axios.get(`${this.props.domain}/snapcapsule`)
      .then(res => {
        res.data.map((capsule) => {
          var domainSize = this.props.domain.length+13;
          var imagePath = "../" + capsule["image"].substring(domainSize);
          var dateToPost = capsule["dateToPost"].substring(0, 10);
          var username = capsule["username"];
          console.log(capsule["caption"], imagePath, dateToPost, username);
          this.props.store.addCapsule(
            capsule["caption"],
            imagePath,
            dateToPost,
            username
          )
        })
      });
  }

  componentWillUnmount() {
    this.props.store.clear();
  }


  render() {
    const { capsules } = this.props.store;
    const capsuleList = capsules.map((capsule, i) => (
    <Col key={i} xs={6} md={4}>
      <Thumbnail src={capsule.imagePath} alt="242x200">
        <h3> {capsule.title} </h3>
        <p> @{capsule.username} </p>
      </Thumbnail>
    </Col>
  ));

return (
  <Grid>
    <Row>
      { capsuleList }

    </Row>
  </Grid>
);

}

    return (
      <Grid>
        <Row>
          { capsuleList }

        </Row>
      </Grid>
    );
  }
}

回答

而不是在目录中提供image标签的路径。 我将backen配置为通过url检索照片。

capsule.imagePath => http：// localhost：8000 / snapcapsule / images / user_1 / People.jpeg

Answer 1

我建议避免动态条件的动态需求。 捆绑时，它可能不会包括您的所有图像，并且可能会引起问题。

在您的情况下，您正在从服务器中获取信息，并尝试直接从文件夹中导入文件，这是不正确的方式。 作为Web应用程序，您应该使用Web URL显示图像。

响应capsuleList，您具有图像路径。 使用该路径，您的后端应处理请求并返回图像。 这是后端责任。 当React在浏览器上运行时，React没有访问文件夹的权限，但是您的后端可以访问文件夹。

在您的后端中，读取图像并进行服务器处理。

Answer 2

您应该实际上可以直接在缩略图组件中引用这些图像，而无需将其导入为模块或类似的内容。

const path = "./../../images/user_1/People.jpg";
<Thumbnail src={path} ...