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的跨域传输数据(JSONP)
Mar 10 Javascript
JavaScript jQuery 中定义数组与操作及jquery数组操作
Dec 18 Javascript
JavaScript中的this使用详解
Jul 27 Javascript
判断js的Array和Object的实现方法
Aug 29 Javascript
Angular.JS中的指令引用template与指令当做属性详解
Mar 30 Javascript
HTML5实现微信拍摄上传照片功能
Apr 21 Javascript
JS简单生成随机数(随机密码)的方法
May 11 Javascript
Vue.js常用指令的使用小结
Jun 23 Javascript
AngularJS 实现点击按钮获取验证码功能实例代码
Jul 13 Javascript
zTree节点文字过多的处理方法
Nov 24 Javascript
jQuery中$原理实例分析
Aug 13 jQuery
vue中watch和computed为什么能监听到数据的改变以及不同之处
Dec 27 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
杏林同学录(六)
2006/10/09 PHP
PHP+MYSQL会员系统的登陆即权限判断实现代码
2011/09/23 PHP
一些需要禁用的PHP危险函数(disable_functions)
2012/02/23 PHP
CI框架中集成CKEditor编辑器的教程
2014/06/09 PHP
PHPCrawl爬虫库实现抓取酷狗歌单的方法示例
2017/12/21 PHP
将jQuery应用于login页面的问题及解决
2009/10/17 Javascript
关于js拖拽上传 [一个拖拽上传修改头像的流程]
2011/07/13 Javascript
Javascript创建自定义对象 创建Object实例添加属性和方法
2012/06/04 Javascript
JavaScript之IE的fireEvent方法详细解析
2013/11/20 Javascript
显示今天的日期js代码(阳历和农历)
2014/09/30 Javascript
jQuery后代选择器用法实例
2014/12/23 Javascript
JavaScript数组去重由慢到快由繁到简(优化篇)
2016/08/26 Javascript
详解Angular 4.x NgTemplateOutlet
2017/05/24 Javascript
JS随机数产生代码分享
2018/02/24 Javascript
Angular ng-animate和ng-cookies用法详解
2018/04/18 Javascript
Vuex入门到上手教程
2018/06/20 Javascript
解决Vue2.0 watch对象属性变化监听不到的问题
2018/09/11 Javascript
Vue的Options用法说明
2020/08/14 Javascript
原生js实现下拉框选择组件
2021/01/20 Javascript
Python实现识别手写数字大纲
2018/01/29 Python
详解Python3.6安装psutil模块和功能简介
2018/05/30 Python
python实现杨氏矩阵查找
2019/03/02 Python
np.random.seed() 的使用详解
2020/01/14 Python
解决python父线程关闭后子线程不关闭问题
2020/04/25 Python
Python logging模块handlers用法详解
2020/08/14 Python
HTML5制作3D爱心动画教程 献给女友浪漫的礼物
2014/11/05 HTML / CSS
阿根廷网上配眼镜:SmartBuyGlasses阿根廷
2016/08/19 全球购物
trivago美国:全球最大的酒店价格比较网站
2018/01/18 全球购物
介绍一下内联、左联、右联
2013/12/31 面试题
面试后的英文感谢信
2014/02/01 职场文书
创先争优个人承诺书
2014/08/30 职场文书
师德师风个人整改措施
2014/10/27 职场文书
男人帮观后感
2015/06/18 职场文书
职位证明模板
2015/06/23 职场文书
教你使用一行Python代码玩遍童年的小游戏
2021/08/23 Python
python获取带有返回值的多线程
2022/05/02 Python