Question

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

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

通过发布方法将图像保存在名为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)

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

Answer 1

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

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

Answer 2

似乎您需要引用图像对象上的source.addFeature(newPoint);。

像这样：

<android.support.design.widget.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabTextAppearance="@style/MyTabLayoutTextAppearance"
        app:layout_constraintBottom_toBottomOf="parent"
        app:tabIndicatorColor="@color/colorBackground"
        app:tabMode="scrollable"
        app:tabMaxWidth="0dp"
        app:tabGravity="fill"
        app:tabSelectedTextColor="@color/colorPrimary"
        />

根据输出img标签的相对URL，可能需要在imagePath的开头添加一个完全限定的URL：imagePath

编辑：尝试访问http://localhost:3457/setting/furnitureVenture/visitImageDirectory/c5e01b4f-8925-4e93-a40b-0dc51cbd2345.png，如果看到图片，则可以忽略限定的URL部分，但是如果return ( <div> {this.state.imageList.map(image => (<img src={image.imagePath}/>) )}</div> );不在src={'/path/to/folder/' + image.imagePath}文件夹内，则需要更新“ / path / to / folder /'成为包含visitImageDirectory

的文件夹路径

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

2 个答案: