vue动图加载图片不能正确显示的解决方法

上次解决过一次，没有记录，后来发现有小伙伴问我这个问题，我今天就顺手记录一下，具体的原因我这里就不详细说， 加载不出来简略的原因是vue简析地址时候把你原的地址当做了一个模块来处理。

解决核心

url: {url: require(’./yunxing.gif’)}, 避免vue解析错误。

代码

<template>
    <el-row class="demo-avatar demo-basic">
        <img :span="12">
            <img :src="url.url"></img>
                <el-avatar shape="square" :size="50" :src="url.url"></el-avatar>
        <!--</el-col>-->
    </el-row>
</template>
<script>
 
    export default {
        data () {
            return {
                url: {url: require('./yunxing.gif')},
            }
        }
    }
</script>

运行结果