最近遇见动态渲染img时，想起了当初刚开始写vue时，曾经遇见的一个小小坑。

Vue中：img的src属性是动态渲染时
不显示问题
1.需求：展示用户头像，数据从后台获取，如果没有拿到则显示默认图片。

如图：

2.第一次写：

如图：

3.结果（汗。。。）并没有显示默认图片来代替：

审查元素发现没显示默认的图片，图片没有被打包。。。。

如图：

4.解决方案：

1、使用require引入图片

2、使用img的onerror属性

当Vue中img的src是动态渲染时不显示问题的更多相关文章

  1. vue 之img的src是动态渲染时(即 :src=' ' )不显示 踩坑

    问题: <img :src="item.image ? `../../assets/image/${item.image}` : ''" alt="image&qu ...

  2. 在Vue中使用了Swiper ，动态从后台获取数据的之后，swiper滑动失效？？

    在Vue中使用了Swiper ,动态从后台获取数据的之后,swiper滑动失效?? 是因为swiper提前初始化了,那时候数据还没有完全出来.这里有两种解决办法 1. 使用vue提供的$nextTic ...

  3. Easyui中使用jquery或js动态添加元素时出现的样式失效的解决方法

    Easyui中使用jquery或js动态添加元素时出现的样式失效的解决方法 2014-03-27 11:44:46|  分类: Easy UI|举报|字号 订阅     可以使用$.parser.pa ...

  4. vue中数据接收成功，页面渲染失败

    1.vue中数据接收成功,页面渲染失败.代码如下 经过查找资料修改代码为 或是 原因是: 由于 JavaScript 的限制, Vue 不能检测以下变动的数组: 当你利用索引直接设置一个项时,例如:  ...

  5. 解决Vue中文本输入框v-model双向绑定后数据不显示的问题

    前言 项目中遇到一个问题就是在Vue中双向绑定对象属性时,手动赋值属性后输入框的数据不实时更新的问题. <FormItem label="地址" prop="eve ...

  6. vue中的img src 动态加载本地json的图片路径写法。

    目录: 注意:本地json文件和json文件里的图片地址都必须写在static 静态文件夹里:否则json文件里的url地址找不到. major_info.json文件里的图片路径写法 页面通过v-b ...

  7. Vue中img标签src属性绑定

    最近刚刚完成了自己的毕业设计项目,整理一下过程中遇到的问题吧~~~ 我做的是一个基于Vue的信息资讯展示与管理平台,显示首页.详情页等的文章内容时就涉及到了图片展示,项目初始时我搭建的是静态网页结构, ...

  8. Vue中img的src属性绑定

    正确:<img :src=" 'files/'+value.src "> 或 <img :src="value.src">错误:< ...

  9. vue中echarts 在element-ui的tab 切换时 width 为100px 时的解决方式

    最近在项目中遇到了这种情况,需要在tab控件上渲染多个echart图标,然后切换查看时,发现图表的宽度不正确 原因:在页面进行加载时,隐藏的图表找不到对应的div大小,所以默认给了一个大小.所以要做的 ...

随机推荐

  1. 2489 小b和灯泡

    2489 小b和灯泡 2 秒 262,144 KB 10 分 2 级题 小b有n个关闭的灯泡,编号为1...n. 小b会进行n轮操作,第i轮她会将编号为i的倍数的灯泡的开关状态取反,即开变成关,关变成 ...

  2. 断断续续Python看到现在

    没有项目的支持 承认自己实践不足 但心怀梦想 我一定可以的

  3. base编码解码

    function b64EncodeUnicode(str) { return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, func ...

  4. spring boot 入门（一）

    转自构建微服务:Spring boot 入门篇 什么是spring boot Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程. ...

  5. HTML5 关于一些本地操作 cookie，sessionStorage，localStorage

    1,b/s 开发中经常会使用到 cookie,大部分情况下,都是由后端代码实现,那么 js 怎么实现对 cookie 的操作呢? <!DOCTYPE html> <html> ...

  6. activiti官网实例项目activiti-explorer之扩展流程节点属性2

    情景需求:需要查找activiti-explorer项目中获取流程id的方法,然后根据流程id获取相应字段在节点属性中添加内容. 大致流程:拿取整个流程id获取对应表单属性,在页面节点属性中展示对应表 ...

  7. RDKIT+postgresql做化合物数据存储与查找

    RDKIT: rdkit的安装与使用,直接conda  instal rdkit,不行的话,使用源码安装,将RDKIT源码下载解压到acaconda的pkg目录下,打开cmd,进入pkg下的 rdki ...

  8. Spring Cloud基础教程

    Spring Cloud基础教程  2017-04-04 被围观 90375 次 该教程内容不定时更新,如您对这些内容感兴趣,可以关注我的博客或微信公众号! 本教程示例代码: GitHub:https ...

  9. Java环境变量配置----JDK开发环境及环境变量设置

    [声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/3 ...

  10. hive on spark

    hive on spark 的配置及设置CDH都已配置好,直接使用就行,但是我在用的时候报错,如下: 具体操作如下时报的错:      在hive 里执行以下命令:     set hive.exec ...