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 相关文章推荐
window.location.hash 使用说明
Nov 08 Javascript
基于jquery的文本框与autocomplete结合使用(asp.net+json)
May 30 Javascript
js作用域及作用域链概念理解及使用
Apr 15 Javascript
js中的屏蔽的使用示例
Jul 30 Javascript
登陆成功后自动计算秒数执行跳转
Jan 23 Javascript
JavaScript中的splice()方法使用详解
Jun 09 Javascript
bootstrap datetimepicker日期插件超详细使用方法介绍
Feb 23 Javascript
移动端触屏幻灯片图片切换插件idangerous swiper.js
Apr 10 Javascript
简单实现js拖拽效果
Jul 25 Javascript
JavaScript通过mouseover()实现图片变大效果的示例
Dec 20 Javascript
移动端图片上传旋转、压缩问题的方法
Oct 16 Javascript
javascript删除数组元素的七个方法示例
Sep 09 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
PHP与MySQL开发中页面出现乱码的一种解决方法
2007/07/29 PHP
PHP5.3的垃圾回收机制(动态存储分配方案)深入理解
2012/12/10 PHP
PHP临时文件的安全性分析
2014/07/04 PHP
php 函数使用可变数量的参数方法
2017/05/02 PHP
php操作redis命令及代码实例大全
2020/11/19 PHP
javascript中length属性的探索
2011/07/31 Javascript
各浏览器中querySelector和querySelectorAll的实现差异分析
2012/05/23 Javascript
封装了jQuery的Ajax请求全局配置
2015/02/05 Javascript
js+HTML5基于过滤器从摄像头中捕获视频的方法
2015/06/16 Javascript
javascript中for/in循环及使用技巧
2015/09/01 Javascript
angularJS 如何读写缓冲的方法(推荐)
2016/08/06 Javascript
关于webuploader插件使用过程遇到的小问题
2016/11/07 Javascript
jQuery实现表格隔行换色
2018/09/01 jQuery
vue3.0 CLI - 2.6 - 组件的复用入门教程
2018/09/14 Javascript
4个顶级JavaScript高级文本编辑器
2018/10/10 Javascript
详解webpack 最简打包结果分析
2019/02/20 Javascript
js设计模式之代理模式及订阅发布模式实例详解
2019/08/15 Javascript
Vue 中如何将函数作为 props 传递给组件的实现代码
2020/05/12 Javascript
vue组件添加事件@click.native操作
2020/10/30 Javascript
Pycharm编辑器技巧之自动导入模块详解
2017/07/18 Python
基于python socketserver框架全面解析
2017/09/21 Python
Python拼接微信好友头像大图的实现方法
2018/08/01 Python
python读取文本中的坐标方法
2018/10/14 Python
Selenium定时刷新网页的实现代码
2018/10/31 Python
python随机生成库faker库api实例详解
2019/11/28 Python
Tkinter中复选菜单是否被选中的判断与设置方式
2020/03/04 Python
python标准库OS模块详解
2020/03/10 Python
解决python 虚拟环境删除包无法加载的问题
2020/07/13 Python
pycharm远程连接服务器并配置python interpreter的方法
2020/12/23 Python
临床医学应届生求职信
2013/11/06 职场文书
经典演讲稿范文
2013/12/30 职场文书
企业宣传工作方案
2014/06/02 职场文书
安全宣传标语口号
2014/06/06 职场文书
2015年银行员工工作总结
2015/04/24 职场文书
团组织推荐意见
2015/06/05 职场文书
浅谈MySQL user权限表
2021/06/18 MySQL