vue render函数动态加载img的src路径操作


Posted in Javascript onOctober 26, 2020

分享一下我去如何解决vue render 中 如何正确配置img的src 路径?

一、我的项目中有俩层组件,

第一层父组件,第二层是render函数封装的组件,父组件调用render函数组件

二、render函数中需要创建<img>标签,img中的src是父组件传进来的;

src正确传进来,图片却不不显示。

三、解决办法:

首先在父组件中将图片import进来,

import empty from "./img/empty.png";

在父组件的data中声明一个变量,将empty图片引入进来

empty: empty,

父组件把图片传给子组件,子组件为

<index-grid :empty="empty"></index-grid>

子组件在props中接收empty

props: {
  empty: {
   type: String
  }
 },

子组件可以直接使用src

img.push(
    h("img", {
     style: {
      verticalAlign: "middle"
     },
     attrs: {
      src: empty
     }
    })
   );

补充知识:VUE 为img元素动态添加src及注意事项

在vue项目中,通常需要通过v-for 渲染多个img元素,当我们想给每个img元素添加他们各自的src时,需要用到vue src动态绑定

例如下面:

<img :src="typeIcon(tt.questionType)" alt="加载失败">

这里的tt 就是渲染的内容,每个img的src需要根据tt的questionType去判断

我们首先为这个判断设置一个函数,并把它绑定到img .

typeIcon:function(kind){
      switch (kind){
      case 1 : return require("../../assets/images/single_choice.png" )
      break;
      case 2 : return require( "../../assets/images/multi_choice.png" )   
      break;
      case 3 : return  require( "../../assets/images/matrix_single.png" )        
      break;
      case 4 : return  require( "../../assets/images/matrix_multi.png") 
      break;
      case 5 :return  require("../../assets/images/blank.png" )
      break;
      default: return   require( "../../assets/images/shortAnswer.png" )
    }
  },

这里我们用一个switch 语句,判断每个img对应的src 。

这里需要注意的是:

返回src时,需要在src字符串前面加上require

最后,用 :src 绑定typeIcon

<img :src="typeIcon(tt.questionType)" alt="加载失败">

以上这篇vue render函数动态加载img的src路径操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery radio 操作代码
Mar 16 Javascript
js 链式延迟执行DOME
Jan 04 Javascript
jquery的冒泡事件的阻止与允许(三种实现方法)
Feb 01 Javascript
jQuery简单实现banner图片切换
Jan 02 Javascript
jQuery实现自动切换播放的经典滑动门效果
Sep 12 Javascript
深入分析jsonp协议原理
Sep 26 Javascript
深入理解JavaScript函数参数(推荐)
Jul 26 Javascript
Angular多选、全选、批量选择操作实例代码
Mar 10 Javascript
JavaScript中splice与slice的区别
May 09 Javascript
Bootstrap treeview实现动态加载数据并添加快捷搜索功能
Jan 07 Javascript
vue+elementUI实现图片上传功能
Aug 20 Javascript
React Native 混合开发多入口加载方式详解
Sep 23 Javascript
vue实现简单的登录弹出框
Oct 26 #Javascript
让你30分钟快速掌握vue3教程
Oct 26 #Javascript
在vue项目中 实现定义全局变量 全局函数操作
Oct 26 #Javascript
vue3+typescript实现图片懒加载插件
Oct 26 #Javascript
原生js实现简单轮播图
Oct 26 #Javascript
vue项目开启Gzip压缩和性能优化操作
Oct 26 #Javascript
Vue检测屏幕变化来改变不同的charts样式实例
Oct 26 #Javascript
You might like
Zend Framework自定义Helper类相关注意事项总结
2016/03/14 PHP
php 判断字符串编码是utf-8 或gb2312实例
2016/11/01 PHP
PHP如何根据文件头检测文件类型实例代码
2018/10/14 PHP
JavaScript面向对象编程
2008/03/02 Javascript
Prototype Function对象 学习
2009/07/12 Javascript
javascript表单验证使用示例(javascript验证邮箱)
2014/01/07 Javascript
如何改进javascript代码的性能
2015/04/02 Javascript
谈一谈javascript闭包
2016/01/28 Javascript
详解JavaScript中双等号引起的隐性类型转换
2016/05/30 Javascript
JS获取字符串实际长度(包含汉字)的简单方法
2016/08/11 Javascript
Bootstrap CSS使用方法
2016/12/23 Javascript
js遍历json的key和value的实例
2017/01/22 Javascript
JS引用传递与值传递的区别与用法分析
2018/06/01 Javascript
深入浅析JS中的严格模式
2018/06/04 Javascript
原生JS实现的简单轮播图功能【适合新手】
2018/08/17 Javascript
element-ui使用导航栏跳转路由的用法详解
2018/08/22 Javascript
20多个小事例带你重温ES10新特性(小结)
2019/09/29 Javascript
JavaScript简易计算器制作
2020/01/17 Javascript
[01:10]为家乡而战!完美世界城市挑战赛全国总决赛花絮
2019/07/25 DOTA
python调用java模块SmartXLS和jpype修改excel文件的方法
2015/04/28 Python
为Python的web框架编写前端模版的教程
2015/04/30 Python
解决Django模板无法使用perms变量问题的方法
2017/09/10 Python
python 控制Asterisk AMI接口外呼电话的例子
2019/08/08 Python
Python Django实现layui风格+django分页功能的例子
2019/08/29 Python
通俗讲解python 装饰器
2020/09/07 Python
了解一下python内建模块collections
2020/09/07 Python
用Python实现定时备份Mongodb数据并上传到FTP服务器
2021/01/27 Python
可持续木材、生态和铝制太阳镜:Proof Eyewear
2019/07/24 全球购物
保加利亚运动鞋购物网站:SneakerStudio.bg
2020/12/23 全球购物
介绍一下grep命令的使用
2012/06/28 面试题
创立科技Java面试题
2015/11/29 面试题
银行奉献演讲稿
2014/09/16 职场文书
市场督导岗位职责
2015/04/10 职场文书
卫生保健工作总结2015
2015/05/18 职场文书
深入浅析Redis 集群伸缩原理
2021/05/15 Redis
解析mybatis-plus中的resultMap简单使用
2021/11/23 Java/Android