在 reactjs 中使用 get 方法显示图像答案

【问题标题】：showing image with get method in reactjs在 reactjs 中使用 get 方法显示图像
【发布时间】：2019-09-25 19:03:14
【问题描述】：

我想使用图像表中的flask和reactjs通过get方法显示多张图像。我使用post方法上传了图像。但我不确定如何使用get方法显示它。这是图像表：

CREATE TABLE sales_lead_image_path(
id VARCHAR(255) PRIMARY KEY,
image_path VARCHAR(255),
);

图片通过post方法保存在一个名为visitImageDirectory的目录中

现在我想在 reactjs 中显示所有图像。这是我在前端写的：

this.state = {
        apiUrl: config.publicRuntimeConfig.publicRuntimeConfigValue.apiUrl,
        imageList:[]
    };


getImagePath = () => {
        axios.get( this.state.apiUrl+'/api/v1/visitImageInfo/getImage', {})
            .then((response) => {
                console.log("response",response.data.data);

                this.setState({
                    imageList:response.data.data
                });
                // this.setState({ imageList: response.data.data  });
            }).catch((error)=>{  console.log("error",error); this.setState({ imageList: []  });   });
    };

 render() {

        return (
          <div> {this.state.imageList.map(image =><img src={image}/>)}                           </div> )}

我在控制台中获取这些数据作为响应：

   "data": [
        {
          "id": "4aa8aa9d-ab3d-4ab1-aca4-12716fa5a82a",
          "imagePath": "visitImageDirectory/38c37fcd-0273-4884-8661-d9b57ffc5384.png"
        },
        {
          "id": "c159e18f-4dbc-4210-8957-4e9fc9bab68d",
          "imagePath": "visitImageDirectory/c5e01b4f-8925-4e93-a40b-0dc51cbd2345.png"
        }  
      ],
GET http://localhost:3457/setting/furnitureVenture/[object%20Object] 404 (Not Found)

但我无法显示图像。我该怎么做？

【问题讨论】：

标签： reactjs post flask get

【解决方案1】：

看来您需要在图像对象上引用imagePath。

像这样：

return (
   <div> {this.state.imageList.map(image => (<img src={image.imagePath}/>) )}</div>
);

根据输出 img 标签的相对 URL，您可能需要在 imagePath 的开头添加一个完全限定的 URL：src={'/path/to/folder/' + image.imagePath}

编辑：尝试访问http://localhost:3457/setting/furnitureVenture/visitImageDirectory/c5e01b4f-8925-4e93-a40b-0dc51cbd2345.png，如果您看到图像，您可以忽略限定的 URL 部分，但如果 visitImageDirectory 不在 /setting/furnitureVenture 文件夹中，那么您需要更新 '/path/to/folder /' 为包含visitImageDirectory的文件夹路径

【讨论】：

visit image directory 在前端不存在。它在后端是一个不同的文件夹。如果我想在 url 中专门显示一个图像，它会是这样的。 http://localhost:5000/api/v1/visitImageInfo/getImage?visitImagePath=visitImageDirectory/38c37fcd-0273-4884-8661-d9b57ffc5384.png但我一直无法通过你提到的路径：
我这样试了，还是不行：跨度>

【解决方案2】：

您检索的数据似乎不包含图像的完整 URL，如果您将 id 和 imagePath 同时保存到 imageList，则必须访问 imagePath 属性 映射时。我不太确定您的端点，但这可能会有所帮助：

<img src={this.state.apiUrl + image.imagePath}/>

【讨论】：