react组件引用本地图片并进行标记生成csv本地文件

最新推荐文章于 2024-08-16 08:42:26 发布

scv5cs

最新推荐文章于 2024-08-16 08:42:26 发布

阅读量528

点赞数

分类专栏： react django 文章标签： js javascript reactjs django

本文链接：https://blog.csdn.net/sinat_40628756/article/details/115442209

版权

这篇博客介绍如何在React应用中引用本地图片，将其作为背景并进行标记操作。标记结果存储为本地CSV文件。文章提供核心代码示例，并分享了完整项目的Github链接。在与后端交互时，作者使用Django RESTful API处理图片上传和JSON数据传输，同时提到了CORS设置的重要性。

摘要由CSDN通过智能技术生成

引用

我最近在使用react写网页，有一个需求是：在前端读取本地的图片文件，在react组件中显示，并且对图片文件进行标记。标记的结果存在本地csv文件中。

效果

显示图片进行标记

实现

下面的实现只是思路以及核心代码，全部代码可移步Github。

为了使得标记可以自行修改，所以我把图片当作div的背景图片显示。标记当作div的p元素。render()函数很简单：

    render(){
            return(
                <Layout className={'image-card-layout'}>
                    <Card
                        className={'image-card'}
                        key={'image'+`${this.state.pic_path}`}
                        title={now_number+1+'frame'} 
                        hoverable
                        extra={
                        <Button type="primary" onClick&#