React读取并显示gif

1. 前言

最近在使用React框架做项目的时候，想读取gif格式的图片，然后网上搜索了下关于React如何读取gif的文章，下面时搜索出来的文章列表：

然后点击进去一一查看了下，里面没有提到如何读取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. 效果展示