React读取并显示gif

蔚落 2022-10-16 07:44 233阅读 0赞

### 目录 ###

*  1. 前言
 *  2. 解决方案
 *  3. 代码实现
 *  4. 效果展示

# 1. 前言 #

最近在使用React框架做项目的时候，想读取gif格式的图片，然后网上搜索了下关于React如何读取gif的文章，下面时搜索出来的文章列表：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d5ZjIwMTc_size_16_color_FFFFFF_t_70_pic_center]  
然后点击进去一一查看了下，里面没有提到如何读取gif，但是我想是不是React读取gif特别难，但是自己无意浏览到一位博主写了一句话：React读取gif和读取jpg或者png的方式是一样的，然后自己尝试试一下，果然成功了。

# 2. 解决方案 #

就是读取普通的图片一样，只需要这一句话就行

import realIGif from '@/assets/images/dlg/dlg.gif'

# 3. 代码实现 #

import React from 'react'
    import { Layout, Row, Col, Divider} from 'antd'
    import CustomBreadcrumb from '@/components/CustomBreadcrumb'
    import '@/style/dlg.scss'
    import realImg from '@/assets/images/dlg/real_image.png'
    import realIGif from '@/assets/images/dlg/dlg.gif'
    
    class DLGView extends React.Component { 
    
        render() { 
            return (
                <Layout>
                    <div>
                        <CustomBreadcrumb arr={ ['数据安全', '攻击', '数据集重建攻击', 'DLG']}></CustomBreadcrumb>
                    </div>
    
    
                    <div style={ { marginTop: 180, marginLeft: 20, marginRight: 50}}>
                        <Row gutter={ 100} justify="center">
                            <Col>
                                <div className='base-style'>
                                    <img src={ realImg}/>
                                </div>
                                <p style={ { fontFamily: "宋体", textAlign: "center"}}>真实图片</p>
                            </Col>
                            <Col>
                                <div className='base-style'>
                                    <img src={ realIGif}/>
                                </div>
                                <p style={ { fontFamily: "宋体", textAlign: "center"}} >重构图片</p>
                            </Col>
                        </Row>
                    </div>
                </Layout>
    
    
            )
        }
    }
    
    export default DLGView

# 4. 效果展示 #

![在这里插入图片描述][20210528100325476.gif_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d5ZjIwMTc_size_16_color_FFFFFF_t_70_pic_center]: /images/20221014/3082b14f80324ec2bc7286715d88e874.png
[20210528100325476.gif_pic_center]: /images/20221014/42abd3f2be6942808f47538595e95ab7.png