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

迈不过友情╰ 2021-09-23 06:50 788阅读 0赞

### 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-row>
    </template>
    <script>
     
        export default {
            data () {
                return {
                    url: {url: require('./yunxing.gif')},
                }
            }
        }
    </script>

# 运行结果 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5NzY4Nzk_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5NzY4Nzk_size_16_color_FFFFFF_t_70]: /images/20210923/5b8562b05795463da1588793540c42fb.png

发表评论取消回复

表情：

评论列表（有 0 条评论，788人围观）

还没有评论，来说两句吧...

相关阅读

相关 img onerror 图片加载失败显示默认图

img onerror 图片加载失败显示默认图  <img src="images/logo.png" onerror="javasc

深藏阁楼爱情的钟/ 2023年01月23日 09:53/ 0 赞/ 220 阅读

相关基于vue 动态加载图片src的解决方法

(基于vue 动态加载图片src的解决方法) assets：在项目编译的过程中会被webpack处理解析为模块依赖，只支持相对路径的形式，如< img src=”

小咪咪/ 2022年11月15日 14:14/ 0 赞/ 349 阅读

相关 Vue - 多图片预加载解决方案

效果图 ![在这里插入图片描述][20210527171230993.gif] 简介 > 解决页面存在大量图像造成页面白屏问题，可自定义图像未加载完毕前的骨架屏、

痛定思痛。/ 2022年10月16日 07:09/ 0 赞/ 504 阅读

相关【Vue】—解决页面图片加载抖动的问题

【Vue】—解决页面图片加载抖动的问题问题如下 ![请添加图片描述][721b328bbea546c28105d965c4539e54.gif] 解决办法

小灰灰/ 2022年08月28日 15:57/ 0 赞/ 332 阅读

相关加载网络图片显示大图

1.将图片的uri列表和下标传给ImagePagerActivity public void imageBrower(int position, ArrayList<

怼烎@/ 2022年08月20日 14:21/ 0 赞/ 213 阅读

相关 Android中高效的显示图片 - 加载大图

![1240][] memory\_leak.png > java.lang.OutofMemoryError: bitmap size exceeds VM budg

川长思鸟来/ 2022年06月08日 20:08/ 0 赞/ 213 阅读

相关 element ui el-carousel 滚动图 vue 基于vue-lazyload图片懒加载、延迟加载解决方案

vue-lazyload插件github地址：[https://github.com/hilongjw/vue-lazyload\requirements][https_git

亦凉/ 2022年04月18日 01:15/ 0 赞/ 891 阅读

相关 vue + 图片加载 + 默认图片

需求：图片数据未返回 + 图片数据返回为空 + 图片加载出错时，图片采用默认图片展示。解决：先判断返回数据是否有，再通过img 的 load事件判断是否加载完成

╰+哭是因爲堅強的太久メ/ 2022年03月10日 18:20/ 0 赞/ 451 阅读

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

vue动图加载图片不能正确显示的解决方法解决核心代码运行结果上次解决过一次，没有记录，后来发现有小伙伴问我这个问题，我今天就顺手记录一下

迈不过友情╰/ 2021年09月23日 06:50/ 0 赞/ 789 阅读

相关 uni-app 图片加载前和加载失败显示默认图

问题我们在用 uni-app 开发前端时，经常会用到 image 图片组件，有时图片比较大、网络差或者图片资源已经不存在，就会导致 image 无法显示图片，而呈现出来...

朱雀/ 2021年03月30日 11:08/ 0 赞/ 3066 阅读