在循环中导入图像

Question

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

我的目录结构如下所示。

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

如您所见，我正在从后端获取路径。 imagePath 看起来像这样“../images/user_1/People.jpg”。我看到另一个 stackoverflow 帖子使用 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>
    );
  }
}

回答

而不是提供目录中图像标签的路径。我将后台配置为通过 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} ...