Javascript 在循环中导入图像

我试图完成的是从正确的目录导入每个文件。我的后端代码将文件保存到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>
);

@observer
导出默认类SnapResact.Component{
componentDidMount（）{
get（`${this.props.domain}/snapcapsule`）
。然后（res=>{
res.data.map（（胶囊）=>{
var domainSize=this.props.domain.length+13；
var imagePath=“../”+胶囊[“图像”]。子字符串（domainSize）；
var dateToPost=capsule[“dateToPost”]。子字符串（0,10）；
var username=capsule[“username”]；
日志（capsule[“caption”]、imagePath、dateToPost、用户名）；
this.props.store.addCapsule(
胶囊[“标题”]，
imagePath，
dateToPost，
用户名
)
})
});
}
组件将卸载（）{
this.props.store.clear（）；
}
render（）{
const{capsules}=this.props.store；
const capsuleList=capsules.map（（胶囊，i）=>(
{capsule.title}
@{capsule.username}

));
返回(
{胶囊列表}
);

}

返回(
{胶囊列表}
);
}
}

答复

而不是在目录中提供图像标记的路径。我将backen配置为通过URL检索照片

---

capsule.imagePath=>

您应该能够直接在缩略图组件中引用这些图像，而无需将其作为模块或类似的内容导入

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

const path=“../../images/user_1/People.jpg”；
您应该能够直接在缩略图组件中引用这些图像，而无需将其作为模块或类似的内容导入

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

const path=“../../images/user_1/People.jpg”；
我建议避免动态条件的动态要求。虽然捆绑您，但它可能不包括您的所有图像，并可能导致问题

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

作为胶囊列表的响应，您有图像路径。使用该路径，您的后端将处理请求并返回映像。这是我的责任。当react在浏览器上运行时，react没有访问文件夹的权限，但您的后端可以访问文件夹

在您的后端，阅读图像并将其服务器化。
我建议避免动态条件的动态要求。虽然捆绑您，但它可能不包括您的所有图像，并可能导致问题

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

作为胶囊列表的响应，您有图像路径。使用该路径，您的后端将处理请求并返回映像。这是我的责任。当react在浏览器上运行时，react没有访问文件夹的权限，但您的后端可以访问文件夹

在后端，读取图像并将其发送到服务器。
这不起作用，因为我无法在capsules.map（（capsule，I）=>（error const path=capsule.imagePath）中声明变量，查看胶囊中的imagePath的唯一方法是通过capsule.imagePath如果将箭头函数体更改为块体，则可以。请参阅此处的“函数体”部分，该部分不起作用，因为我无法在capsules.map中声明变量（（capsule，I）=>（error const path=capsule.imagePath），在胶囊中查看imagePath的唯一方法是通过胶囊。imagePath如果将箭头函数体更改为块体，则可以。当我研究显示图像时，请参阅此处的“函数体”部分，程序员似乎同意后端应仅提供路径，因为存储图像的成本太高。是的，服务器将仅提供url来自数据库。但该url也与服务器相关。我们不会将图像存储在数据库中。如果我在现实生活中认识你，我会拥抱你。当我研究显示图像时，程序员似乎同意后端应该只提供路径，因为存储图像的成本太高。是的，服务器将只提供来自数据库的url。但该url也相关到服务器。我们不会在数据库中存储图像。如果我在现实生活中认识你，我会拥抱你。