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 相关文章推荐
prototype 学习笔记整理
Jul 17 Javascript
Jquery知识点一 Jquery的ready和Dom的onload的区别
Jan 15 Javascript
js中方法重载如何实现?以及函数的参数问题
Aug 01 Javascript
js特殊字符转义介绍
Nov 05 Javascript
JavaScript图片放大技术(放大镜)实现代码分享
Nov 14 Javascript
JavaScript学习总结之JS、AJAX应用
Jan 29 Javascript
移动端js触摸事件详解
Sep 18 Javascript
Vue 过渡实现轮播图效果
Mar 27 Javascript
JavaScript Drum Kit 指南(纯 JS 模拟敲鼓效果)
Jul 23 Javascript
angular或者js怎么确定选中ul中的哪几个li
Aug 16 Javascript
layui数据表格跨行自动合并的例子
Sep 02 Javascript
JavaScript实现简易聊天对话框(加滚动条)
Feb 10 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冒泡排序、快速排序、快速查找、二维数组去重实例分享
2014/04/24 PHP
PHP实现利用MySQL保存session的方法
2014/08/23 PHP
PHP中使用Memache作为进程锁的操作类分享
2015/03/30 PHP
ThinkPHP3.1.x修改成功与失败跳转页面的方法
2017/09/29 PHP
纯CSS3实现质感细腻丝滑按钮
2021/03/09 HTML / CSS
javascript removeChild 使用注意事项
2009/04/11 Javascript
js截取函数(indexOf,join等)
2010/09/01 Javascript
PHP 与 js的通信(via ajax,json)
2010/11/16 Javascript
javascript变量作用域使用中常见错误总结
2013/03/26 Javascript
JS与C#编码解码
2013/12/03 Javascript
利用JS来控制键盘的上下左右键(示例代码)
2013/12/14 Javascript
JQuery对表格进行操作的常用技巧总结
2014/04/23 Javascript
jQuery实现的进度条效果
2015/07/15 Javascript
jQuery焦点图轮播特效代码分享(3款)
2015/09/05 Javascript
AngularJS 遇到的小坑与技巧小结
2016/06/07 Javascript
AngularJs Injecting Services Into Controllers详解
2016/09/02 Javascript
ES6中箭头函数的定义与调用方式详解
2017/06/02 Javascript
pm2启动ssr失败的解决方法
2019/06/29 Javascript
vue路由跳转传递参数的方式总结
2020/05/10 Javascript
如何手动实现一个 JavaScript 模块执行器
2020/10/16 Javascript
微信小程序实现自定义底部导航
2020/11/18 Javascript
JavaScript实现京东快递单号查询
2020/11/30 Javascript
Python中解析JSON并同时进行自定义编码处理实例
2015/02/08 Python
Python判断值是否在list或set中的性能对比分析
2016/04/16 Python
浅谈Python2、Python3相对路径、绝对路径导入方法
2018/06/22 Python
PyQt5实现简易电子词典
2019/06/25 Python
python多线程案例之多任务copy文件完整实例
2019/10/29 Python
Python实现区域填充的示例代码
2021/02/03 Python
党的群众路线教育实践活动宣传方案
2014/02/23 职场文书
高一学年自我鉴定范文(3篇)
2014/09/26 职场文书
毕业设计答辩开场白
2015/05/29 职场文书
《悬崖边的树》读后感2篇
2019/12/02 职场文书
html+css 实现简易导航栏功能
2021/04/07 HTML / CSS
pytorch实现手写数字图片识别
2021/05/20 Python
浅谈由position属性引申的css进阶讨论
2021/05/25 HTML / CSS
基于Android10渲染Surface的创建过程
2022/08/14 Java/Android