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

在vue中写动态展示图标的需求时,遇到个小坑:

需求:(根据权限动态展示图标,如果没有显式默认图标)

错误写法1:

错误写法2:

报错:(实际img文件夹是有这些图片的,没找到)

审查元素发现:(图片并没有被打包,显示引入路径)

解决办法:

方法一: 使用require引入图片:

方法二: 使用img的onerror属性:

审查元素已经被成功打包转为base64:

原文地址:https://www.cnblogs.com/zixuan00/p/12598953.html

时间: 2024-08-30 13:58:04

vue中img的src动态渲染不显示问题的相关文章

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

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

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

最近遇见动态渲染img时,想起了当初刚开始写vue时,曾经遇见的一个小小坑. Vue中:img的src属性是动态渲染时不显示问题1.需求:展示用户头像,数据从后台获取,如果没有拿到则显示默认图片. 如图: 2.第一次写: 如图: 3.结果(汗...)并没有显示默认图片来代替: 审查元素发现没显示默认的图片,图片没有被打包.... 如图: 4.解决方案: 1.使用require引入图片 2.使用img的onerror属性 原文地址:https://www.cnblogs.com/xiaoqi201

在vue中让某个组件重新渲染的笨方法

在vue中,推崇的是数据驱动也就是数据更新进而使组件得以重新渲染:在某些情况下,我们想要在数据不改变的情况下,重新渲染组件:我遇到的一个情况是:同一个页面,两个tab页分别为tab1和tab2,公用了一个组件,在tab1页修改了数据,再去tab2页查看的时候,发现tab1修改的数据会在tab2中的组件中显示,为了能够使得公用的组件重新渲染,可以使用v-if指令进行合理处理. 原文地址:https://www.cnblogs.com/llcdxh/p/9357661.html

在vue中利用vue-qr插件动态生成二维码并嵌入LOGO

收到需求要生成二维码的时候刚进项目组不久,接触vue也才一两个星期,还处于懵逼状态. 本小白的第一反应就是百度二维码的生成方法,网上有很多大神给出解决方案,最开始本小白以为是在后台生成图片然后传到前台页面,后来发现可以直接在前端用js生成,网上查到的大部分都是用jquery.qrcode.js配合utf.js(为了支持中文)和jquery-1.8.0.js来实现,亲测可行(但本白只在原生HTML中实现,vue中死活报错:"找不到qrcode方法",是不是本小白没找准姿势,哪位大神求告知

Vue中如何书写js来渲染页面填充数据的部分代码

new Vue({ el:"#app" , data:{ user:{ id:"", username:"", password:"", age:"", sex:"", }, userList:[] }, methods:{ findAll:function () { //在当前方法中定义一个变量,表明是vue对象 var _this= this; axios.get('/day01_e

vue中使用baidushare分享到微信无法显示bug解决方案

最近vue单页面项目中有个页面分享的功能需求,按以往经验,选择了百度开源的baidushare.js 经过一天的挣扎,终于弄清楚了分享到微信后无法显示的原因. 对比分析: 以往成功使用:另写了一个专门的分享着陆页,也就是一个html文件,然后在里面发请求拿数据渲染页面.分享链接→http://www.123.com/share.html?id=123 本次失败使用: 分享着陆页没有单独写,还是利用vue单文件的一个子路由+参数.分享链接→http://www.123.com/#/share?id

vue中 表头 th 合并单元格,且表格列数不定的动态渲染方法

吐槽 今天,在vue中遇到 复杂表格的渲染 ,需要合并表头th的单元格,且合并单元格的那列的表头数据是动态数据,也就是不知道会有多少个表头列,而这几个表头列还分了好几个子表头. 这个需求在js里用Juicer模板很好做的,思路我是有的,但就是对于vue,我也算初学者,很多概念不是很懂,这就限制了思路. 在网上搜了很多合并单元格的都是简单的数据合并,也就是td合并, 不是我们的需求,就不贴了. 哎,废话不多说了,看代码吧: 代码示例 使用iviewui的table组件: 最初,直接使用项目中的iv

vue中通过后台返回的只动态生成表单及提交

在crm系统中,页面中表单内容和表单提交的内容都是不固定的,特别是表单内容不确定:是根据后台的需要配置出来:前台根据接口返回:进行渲染,处理后进行提交,这样在vue中就会出现问题:因为vue中的数据是先渲染后使用:所有的数据必须先生命出来,所以这样就造成了这个问题: 解决方法: 1.在请求接口:渲染后台需要提交的表单字段的时候:先对所有的需要渲染和提交的表单字段进行遍历,然后存储到data中一个对象中,我写的对象是subParams,这样就可以把所有需要提交的字段提交到subparams中了:

使用MVVM框架时,如何处理在页面动态渲染完之后需要发生的事件呢?

在项目实践过程中,当我们使用如avalon这样的MVVM框架时,通常会发现一直会有个问题. 过往的经验告诉我们,想在页面加载完之后处理些事件我们可以绑定document的ready方法或者使用jquery的$(function{})去处理. 但是,如果在页面中数据有些时动态渲染的呢,这些数据不一定时在页面加载完之后就存在,而是页面加载完之后,由于业务需求,我们可能还需要去ajax后台重新渲染某些页面, 这个时候我们可以将页面需要动态渲染的元素绑定一个事件,如下: 1 $("变化的元素选择器&qu