最近遇见动态渲染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. leetcode每日刷题计划-简单篇day11

    Num 121 买卖股票的最佳时期 Best Time to Buy and Sell Stock class Solution { public: int maxProfit(vector<i ...

  2. POJ_1321

    题目   在一个给定形状的棋盘(形状可能是不规则的)上面摆放棋子,棋子没有区别.要求摆放时任意的两个棋子不能放在棋盘中的同一行或者同一列,请编程求解对于给定形状和大小的棋盘,摆放k个棋子的所有可行的摆 ...

  3. windows cmd.exe 将程序 stdout 输出到文件中

    问题背景:通过 cmd.exe 调用程序,会有一些输出信息,在 cmd 中不方便查阅,所以需要导入文件中. 例如 方法: 可以在其路径下看到

  4. MySQL Windows环境变量设置

    问题:MySQL无法全局使用 1.查找MySQL路径 2.添加环境变量 3.验证功能

  5. (译)MySQL 8.0实验室---MySQL中的倒序索引(Descending Indexes)

    译者注:MySQL 8.0之前,不管是否指定索引建的排序方式,都会忽略创建索引时候指定的排序方式(语法上不会报错),最终都会创建为ASC方式的索引,在执行查询的时候,只存在forwarded(正向)方 ...

  6. 转载:C# socket端口复用-多主机头绑定

    什么是端口复用: 因为在winsock的实现中,对于服务器的绑定是可以多重绑定的,在确定多重绑定使用谁的时候,根据一条原则是谁的指定最明确则将包递交给谁,而且没有权限之分.这种多重绑定便称之为端口复用 ...

  7. ORA-12541:TNS:无监听程序

    1.OracleServiceORCL确认已经在服务中启动 2.OracleOraDb11g_home1TNSListener确认已经在服务中启动 3.服务端listener.ora和tnsnames ...

  8. 云主机中毒 cpu爆满解决日志

    在上一篇博文Linux系统发现占用CPU达100%的进程并处理 里面以为已经把挖矿程序sustse处理干净了,可是没过两天又收到阿里云短信提醒,说服务器有问题,难道还有后门吗?也多亏阿里云给出提示“出 ...

  9. java 图片转base64字符串、base64字符串转图片

    java 图片转base64字符串.base64字符串转图片 1. 图片转base64字符串: /** * base64编码字符串转换为图片 * @param imgStr base64编码字符串 * ...

  10. Window上编译最新版libCef(Branch 2704)(转载)

    转自http://blog.csdn.net/mfcing/article/details/52066579 1.开发环境搭建   VS2010及以上版本,CMake 2.8.12.1及以上版本.我安 ...