最近遇见动态渲染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. 71.纯 CSS 创作一个跳 8 字型舞的 loader

    原文地址:https://segmentfault.com/a/1190000015534639#articleHeader0 感想:rotateX() 和rotateZ()一起使用好懵呀. HTML ...

  2. laravel-- facade 实现CURD

    路由内需配置 Route::any('test1','StudentController@test1');原生CURD写法 public function test1() {// 查找// $stud ...

  3. 正则表达式中引用shell变量

    注意,是用单引号包含双引号来引用变量 > MAPPING_ID_PO="000001:AP1-TU1000002:AP1-TU2000003:AP1-TU3000004:AP1-TU4 ...

  4. Mac 系统下创建可双击执行文件，cd到执行文件当前目录

    在mac下之前我一直用.sh文件,但是要去终端里才能执行,后来得知可以写.command文件,双击及可执行,很方便,特此记录 #!/bin/bash basepath=$(cd `dirname $0 ...

  5. hbase的常用的shell命令&hbase的DDL操作&hbase的DML操作

    前言 笔者在分类中的hbase栏目之前已经分享了hbase的安装以及一些常用的shell命令的使用,这里不仅仅重新复习一下shell命令,还会介绍hbase的DDL以及DML的相关操作. hbase的 ...

  6. P1219 八皇后

    题目描述 检查一个如下的6 x 6的跳棋棋盘,有六个棋子被放置在棋盘上,使得每行.每列有且只有一个,每条对角线(包括两条主对角线的所有平行线)上至多有一个棋子. 上面的布局可以用序列2 4 6 1 3 ...

  7. 团队作业6—《Spring_Four》团队项目系统设计改进与详细设计

    一.修改完善团队项目系统设计说明书 a.分析<考信项目系统设计说明书>初稿的不足:数据库建模不足 b. 团队项目Github仓库中更新:https://github.com/gzyt/SR ...

  8. myeclise2017安装包及破解文件

    亲测可用! myeclipse2017安装包 链接:https://pan.baidu.com/s/13R1wk7mI9ECjEByanIbHDA 提取码:vaeb myeclipse2017破解包 ...

  9. letecode242有效字母的异位词

    bool isAnagram(char* s, char* t) { ] = {}; ] = {}; int lenS = strlen(s); int lenT = strlen(t); ;i< ...

  10. C# 乐观锁、悲观锁、共享锁、排它锁、互斥锁

    悲观锁(Pessimistic Lock), 顾名思义,就是很悲观,每次去拿数据的时候都认为别人会修改,所以每次在拿数据的时候都会上锁,这样别人想拿这个数据就会block直到它拿到锁.传统的关系型数据 ...