当Vue中img的src是动态渲染时不显示问题

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

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

如图:

2.第一次写:

如图:

3.结果(汗。。。)并没有显示默认图片来代替:

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

如图:

4.解决方案:

1、使用require引入图片

2、使用img的onerror属性

原文地址:https://www.cnblogs.com/xiaoqi2018/p/10763546.html

时间: 2024-10-19 03:22:09

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

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

问题: <img :src="item.image ? `../../assets/image/${item.image}` : ''" alt="image"/> 解决方法: 加上require() 即可 <img :src="item.image ? require(`../../assets/image/${item.image}`) : ''" alt="image"/> vue 之img的sr

在Vue中使用了Swiper ,动态从后台获取数据的之后,swiper滑动失效??

在Vue中使用了Swiper ,动态从后台获取数据的之后,swiper滑动失效?? 是因为swiper提前初始化了,那时候数据还没有完全出来.这里有两种解决办法 1. 使用vue提供的$nextTick()方法 当Vue构造器里的data值被修改完成后会调用这个方法,也相当于一个钩子函数吧,和构造器里的updated生命周期很像. 在数据初始化完毕之后,再初始化swiper就不会出现问题了 this.$nextTick(function () { var swiper = new Swiper(

vue中img的src动态渲染不显示问题

在vue中写动态展示图标的需求时,遇到个小坑: 需求:(根据权限动态展示图标,如果没有显式默认图标) 错误写法1: 错误写法2: 报错:(实际img文件夹是有这些图片的,没找到) 审查元素发现:(图片并没有被打包,显示引入路径) 解决办法: 方法一: 使用require引入图片: 方法二: 使用img的onerror属性: 审查元素已经被成功打包转为base64: 原文地址:https://www.cnblogs.com/zixuan00/p/12598953.html

vue中img的src引入图片不显示问题

需要前端循环图片数组将其放到页面中去. 需要将src渲染到页面中,如果单纯写src的路径会出现不显示图片的问题 因为图片路径在assets,所以需要require一下. 原文地址:https://www.cnblogs.com/yuanxinru321/p/10572844.html

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

可以使用$.parser.parse();这个方法进行处理: 例如: $.parser.parse(); 表示对整个页面重新渲染,渲染完就可以看到easyui原来的样式了: var targetObj = $("<input name='mydate' class='easyui-datebox'>").appendTo("#id"); $.parser.parse(targetObj); 表示重新渲染某个特定的组件.

vue中iview框架下select选择器渲染的时候报警告Invalid prop: type check failed for prop &quot;value&quot;. Expected String, Number, got Undefined.

问题起因: 在一个选择器里 出了问题! <Form-item label="节点"> <Select v-model="formItem.select" placeholder="请选择节点" filterable> <Option @on-change="selectValue" v-for="item in mySelect" :value="item.hid&q

vue中使用腾讯云Im的一些坑

在vue中使用腾讯云Im 通信时,官方给出的文档及sdk提供的都是es5的写法.我们在vue中使用均需要用es6的方式改写sdk的js文件及按自己的业务调用对应的api就ok了 1.对sdk的js文件改写 使用exports方法导出函数.官方原先提供的api不变,只需在外加一层exports方法暴露即可,webim.js里有一处long需要修改,其他不变. 在相应需要的地方引入即可 遇到的一些坑: 曾经使用过低版本的sdk 导致登录成功后一直不能触发回掉函数,本人使用的是version:1.7.

vue中如何深度监听一个对象?

大家都知道,Vue项目中对数据的监听,提供了一个很好的钩子watch,watch可以极其方便的监听我们常用数据类型值的变化,但通常当我们想监听一个对象中,某个属性值的变化时,很难达到我们预期的效果.那么如何实现对象属性的深度监听呢? vue中提供了在watch监听时设置deep:true 就可以实现对对象的深度监听; demo:   https://run.iviewui.com/oW2m2Jo7 直接监听对象--代码如下: 1 watch:{ 2 obj:{ //监听的对象 3 deep:tr

vue中使用v-if判断数组长度是出现length报错

在vue中使用v-if判断数组的长度时出现报错 <el-collapse-item :key="index" v-if="data.childrens.length > 0" :title="data.fname" :name="data.fname"> <el-row> <el-col :md="24" :lg="12" :xl="8&qu