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 相关文章推荐
jQuery Tools tab(幻灯片)
Jul 14 Javascript
js屏蔽鼠标键盘(右键/Ctrl+N/Shift+F10/F11/F5刷新/退格键)
Jan 24 Javascript
javascript制作的网页侧边弹出框思路及实现代码
May 21 Javascript
javascript实现图片上传前台页面
Aug 18 Javascript
详解WordPress开发中get_current_screen()函数的使用
Jan 11 Javascript
js使用Promise实现简单的Ajax缓存
Nov 14 Javascript
浅析JS中NEW的实现原理及重写
Feb 20 Javascript
JS数据类型判断的几种常用方法
Jul 07 Javascript
vue通过过滤器实现数据格式化
Jul 20 Javascript
nuxt.js写项目时增加错误提示页面操作
Nov 05 Javascript
Vue+scss白天和夜间模式切换功能的实现方法
Jan 05 Vue.js
vue打开新窗口并实现传参的图文实例
Mar 04 Vue.js
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中使用Imagick实现图像直方图的实现代码
2011/08/30 PHP
实例介绍PHP的Reflection反射机制
2014/08/05 PHP
JavaScript的Function详细
2006/11/14 Javascript
javascript 硬盘序列号+其它硬件信息
2008/12/23 Javascript
Javascript select下拉框操作常用方法
2009/11/09 Javascript
jquery中one()方法的用法实例
2015/01/16 Javascript
jQuery实现气球弹出框式的侧边导航菜单效果
2015/09/22 Javascript
用JavaScript判断CSS浏览器类型前缀的两种方法
2015/10/08 Javascript
详解js跨域原理以及2种解决方案
2015/12/09 Javascript
如何解决easyui自定义标签 datagrid edit combobox 手动输入保存不上
2015/12/26 Javascript
怎样判断jQuery当前元素是隐藏还是显示
2016/11/23 Javascript
bootstrap使用validate实现简单校验功能
2016/12/02 Javascript
浅谈js-FCC算法Friendly Date Ranges(详解)
2017/04/10 Javascript
echarts学习笔记之箱线图的分析与绘制详解
2017/11/22 Javascript
vue实现word,pdf文件的导出功能
2018/07/31 Javascript
小程序开发基础之view视图容器
2018/08/21 Javascript
vue项目在安卓低版本机显示空白的原因分析(两种)
2018/09/04 Javascript
JS继承定义与使用方法简单示例
2020/02/19 Javascript
Python使用xlrd模块操作Excel数据导入的方法
2015/05/26 Python
理论讲解python多进程并发编程
2018/02/09 Python
python+Splinter实现12306抢票功能
2018/09/25 Python
python中几种自动微分库解析
2019/08/29 Python
python中def是做什么的
2020/06/10 Python
python利用递归方法实现求集合的幂集
2020/09/07 Python
Django框架实现在线考试系统的示例代码
2020/11/30 Python
python gui开发——制作抖音无水印视频下载工具(附源码)
2021/02/07 Python
如何用Python和JS实现的Web SSH工具
2021/02/23 Python
全球虚拟主机商:HostGator
2017/02/06 全球购物
微软中国官方商城:Microsoft Store中国
2018/10/12 全球购物
文员个人求职自荐信
2013/09/21 职场文书
大学生两会精神学习心得体会
2014/03/10 职场文书
2015年感恩母亲节活动方案
2015/05/04 职场文书
朝花夕拾读书笔记
2015/06/29 职场文书
html form表单基础入门案例讲解
2021/07/21 HTML / CSS
利用js实现简单开关灯代码
2021/11/23 Javascript
mysql查询结果实现多列拼接查询
2022/04/03 MySQL