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 动态数据下的锚点错位问题解决方法
Dec 24 Javascript
JS 类型转换常见方法小结
May 31 Javascript
Jquery动态进行图片缩略的原理及实现
Aug 13 Javascript
一个JavaScript操作元素定位元素的实例
Oct 29 Javascript
深入理解JavaScript系列(27):设计模式之建造者模式详解
Mar 03 Javascript
jquery滚动加载数据的方法
Mar 09 Javascript
基于Css3和JQuery实现打字机效果
Aug 11 Javascript
Javascript中indexOf()和lastIndexOf应用方法实例
Aug 24 Javascript
浅谈Vue.js
Mar 02 Javascript
vue2.0 keep-alive最佳实践
Jul 06 Javascript
详谈表单重复提交的三种情况及解决方法
Aug 16 Javascript
Ajax获取node服务器数据的完整步骤
Sep 20 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中计算未知长度的字符串哪个字符出现的次数最多的代码
2012/08/14 PHP
Yii把CGridView文本框换成下拉框的方法
2014/12/03 PHP
学习php开源项目的源码指南
2014/12/21 PHP
PHP时间函数使用详解
2019/03/21 PHP
键盘控制事件应用教程大全
2006/11/24 Javascript
javascript中获取下个月一号,是星期几
2012/06/01 Javascript
jquery 实现两级导航菜单附效果图
2014/03/07 Javascript
Jquery注册事件实现方法
2015/05/18 Javascript
如何屏蔽防止别的网站嵌入框架代码
2015/08/24 Javascript
jquery实现清新实用的网页菜单效果
2015/08/28 Javascript
jQuery EasyUI Dialog拖不下来如何解决
2015/09/28 Javascript
jQuery结合CSS制作动态的下拉菜单
2015/10/27 Javascript
深入理解JS中的substr和substring
2016/04/26 Javascript
jQuery绑定事件的四种方式介绍
2016/10/31 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单
2016/11/25 Javascript
vue实现ajax滚动下拉加载,同时具有loading效果(推荐)
2017/01/11 Javascript
React Router V4使用指南(精讲)
2018/09/17 Javascript
[47:52]完美世界DOTA2联赛PWL S2 PXG vs InkIce 第二场 11.26
2020/11/30 DOTA
python对离散变量的one-hot编码方法
2018/07/11 Python
Django压缩静态文件的实现方法详析
2018/08/26 Python
python给微信好友定时推送消息的示例
2019/02/20 Python
python两个_多个字典合并相加的实例代码
2019/12/26 Python
Python 下载Bing壁纸的示例
2020/09/29 Python
用Python实现职工信息管理系统
2020/12/30 Python
领先的钻石和订婚戒指零售商:Diamonds-USA
2016/12/11 全球购物
新西兰珠宝品牌:Michael Hill
2017/09/16 全球购物
澳大利亚最便宜的网上药房:Chemist Warehouse
2020/01/30 全球购物
什么是用户模式(User Mode)与内核模式(Kernel Mode) ?
2015/09/07 面试题
教师开学感言
2014/02/14 职场文书
电视购物广告词
2014/03/19 职场文书
小学生作文评语大全
2014/04/21 职场文书
信电学院毕业生自荐书
2014/05/24 职场文书
上学路上观后感
2015/06/16 职场文书
Java后台生成图片的完整步骤
2021/08/04 Java/Android
美国运营商 T-Mobile 以 117.83Mb/s 的速度排第一位
2022/04/21 数码科技
Win Server2016远程桌面如何允许多用户同时登录
2022/06/10 Servers