vue的三种图片引入方式代码实例


Posted in Javascript onNovember 19, 2019

这篇文章主要介绍了vue的三种图片引入方式代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

首先给图片地址绑定变量:

<template>
  <img :src="imgUrl">
</template>

在script中设置变量:

//方法1:直接将图片引入为模块
require imgUrl from "../assets/test.png"

//方法2:把imgUrl放在数据中
data() {
  return {
    imgUrl:require("../assets/test.png")
   }
}
补充方法2:(在data数组中保存数据的情况)
data() {
   test: [
     {  imgUrl: require('../assets/test.png'),  id: '1'  },
   ],
   ...
}

//方法3:在生命周期函数中设置
data() {
  return {
    imgUrl:" "
   }
}

created() {
  let urlTemp = "assets/test.png";
  this.imgUrl = require("@/" + urlTemp)
}
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript字符串对象replace方法实例(用于字符串替换或正则替换)
Oct 16 Javascript
JS模拟酷狗音乐播放器收缩折叠关闭效果代码
Oct 29 Javascript
jQuery悬停文字提示框插件jquery.tooltipster.js用法示例【附demo源码下载】
Jul 19 Javascript
JavaScript新增样式规则(推荐)
Jul 19 Javascript
JS多文件上传的实例代码
Jan 11 Javascript
bootstrap网格系统使用方法解析
Jan 13 Javascript
JavaScript的for循环中嵌套一个点击事件的问题解决
Mar 03 Javascript
js + css实现标签内容切换功能(实例讲解)
Oct 09 Javascript
JS实现点击链接切换显示隐藏内容的方法
Oct 19 Javascript
在Vant的基础上封装下拉日期控件的代码示例
Dec 05 Javascript
angularjs实现table表格td单元格单击变输入框/可编辑状态示例
Feb 21 Javascript
javascript异常处理实现原理详解
Feb 17 Javascript
JS在Array数组中按指定位置删除或添加元素对象方法示例
Nov 19 #Javascript
JavaScript(js)处理的HTML事件、键盘事件、鼠标事件简单示例
Nov 19 #Javascript
VUEX-action可以修改state吗
Nov 19 #Javascript
Vue.extend 编程式插入组件的实现
Nov 18 #Javascript
浅谈Webpack4 Tree Shaking 终极优化指南
Nov 18 #Javascript
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
Nov 18 #jQuery
webpack常用配置总览(小结)
Nov 18 #Javascript
You might like
php获得文件夹下所有文件的递归算法的简单实例
2016/11/01 PHP
php数据库操作model类(使用__call方法)
2016/11/16 PHP
PHP 进度条函数的简单实例
2017/09/19 PHP
php 的多进程操作实践案例分析
2020/02/28 PHP
使用jQuery UI的tooltip函数修饰title属性的气泡悬浮框
2013/06/24 Javascript
编写js扩展方法判断一个数组中是否包含某个元素
2013/11/08 Javascript
ES6新特性之变量和字符串用法示例
2017/04/01 Javascript
浅谈Vue.js中的v-on(事件处理)
2017/09/05 Javascript
webpack4 升级迁移的实现
2018/09/12 Javascript
微信小程序canvas绘制圆角base64图片的实现
2019/08/18 Javascript
js 递归json树实现根据子id查父id的方法分析
2019/11/08 Javascript
JS实现水平移动与垂直移动动画
2019/12/19 Javascript
微信小程序间使用navigator跳转传值问题实例分析
2020/03/27 Javascript
Python实现信用卡系统(支持购物、转账、存取钱)
2016/06/24 Python
caffe binaryproto 与 npy相互转换的实例讲解
2018/07/09 Python
对numpy中的transpose和swapaxes函数详解
2018/08/02 Python
Python实现获取汉字偏旁部首的方法示例【测试可用】
2018/12/18 Python
树莓派采用socket方式文件传输(python)
2019/06/22 Python
使用Python和OpenCV检测图像中的物体并将物体裁剪下来
2019/10/30 Python
python属于解释语言吗
2020/06/11 Python
python使用bs4爬取boss直聘静态页面
2020/10/10 Python
HTML5 canvas实现雪花飘落特效
2016/03/08 HTML / CSS
全球最大最受欢迎的旅游社区:Tripadvisor
2017/11/03 全球购物
国家地理在线商店:Shop National Geographic
2018/06/30 全球购物
.NET初级开发工程师面试题(包括Javascript)
2012/08/22 面试题
幼师求职自荐信范文
2014/01/26 职场文书
电台实习生求职信
2014/02/25 职场文书
小班幼儿评语大全
2014/04/30 职场文书
宣传普通话标语
2014/06/27 职场文书
理财学专业自荐书
2014/06/28 职场文书
关于对大人不礼貌的检讨书
2014/09/29 职场文书
2015年世界无烟日演讲稿
2015/03/18 职场文书
2015年社会治安综合治理工作总结
2015/04/10 职场文书
谢师宴家长致辞
2015/07/27 职场文书
中学教师教学工作总结
2015/08/13 职场文书
MySQL三种方式实现递归查询
2022/04/18 MySQL