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 相关文章推荐
JS检测图片大小的实例
Aug 21 Javascript
JS图片无缝、平滑滚动代码
Mar 11 Javascript
jQuery 获取兄弟元素的几种不错方法
May 23 Javascript
jquery 3D 标签云示例代码
Jun 12 Javascript
浅谈重写window对象的方法
Dec 29 Javascript
基于JavaScript实现生成名片、链接等二维码
Sep 20 Javascript
bootstrap fileinput 插件使用项目总结(经验)
Feb 22 Javascript
详解angularJs指令的3种绑定策略
Apr 13 Javascript
vue中父子组件注意事项,传值及slot应用技巧
May 09 Javascript
Vue项目中最新用到的一些实用小技巧
Nov 06 Javascript
从零开始在vue-cli4配置自适应vw布局的实现
Jun 08 Javascript
js 实现Material UI点击涟漪效果示例
Sep 23 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
德生H-501的评价与改造
2021/03/02 无线电
php pcntl_fork和pcntl_fork 的用法
2009/04/13 PHP
php 数学运算验证码实现代码
2009/10/11 PHP
PHP 登录完成后如何跳转上一访问页面
2014/01/14 PHP
Linux系统下php获得系统分区信息的方法
2015/03/30 PHP
PHP中set error handler函数用法小结
2015/11/11 PHP
JavaScript 学习笔记(五)
2009/12/31 Javascript
jQuery中获取Radio元素值的方法
2013/07/02 Javascript
深入分析JQuery和JavaScript的异同
2014/10/23 Javascript
javascript面向对象之对象的深入理解
2015/01/13 Javascript
原生js实现的贪吃蛇网页版游戏完整实例
2015/05/18 Javascript
Bootstrap Metronic完全响应式管理模板学习笔记
2016/07/08 Javascript
bootstrap组件之按钮式下拉菜单小结
2017/01/19 Javascript
Bootstrap fileinput文件上传预览插件使用详解
2017/05/16 Javascript
jQuery导航条固定定位效果实例代码
2017/05/26 jQuery
js装饰设计模式学习心得
2018/02/17 Javascript
Node.js readline模块与util模块的使用
2018/03/01 Javascript
微信小程序获取当前位置和城市名
2019/11/13 Javascript
javascript设计模式 ? 简单工厂模式原理与应用实例分析
2020/04/09 Javascript
Python实现学校管理系统
2018/01/11 Python
python实现kNN算法识别手写体数字的示例代码
2019/08/16 Python
python加载自定义词典实例
2019/12/06 Python
tensorflow模型转ncnn的操作方式
2020/05/25 Python
Django中使用Celery的方法步骤
2020/12/07 Python
教师开学感言
2014/02/14 职场文书
测试工程师程序员求职信范文
2014/02/20 职场文书
高中学生期末评语
2014/04/25 职场文书
煤矿安全生产标语
2014/06/06 职场文书
诉讼代理人授权委托书
2014/10/11 职场文书
2014年最新版离婚协议书范本
2014/11/25 职场文书
2014小学二年级班主任工作总结
2014/12/05 职场文书
小学生学习保证书
2015/02/26 职场文书
行政二审代理词
2015/05/25 职场文书
催款函范本大全
2015/06/24 职场文书
HR在给员工开具离职证明时,需要注意哪些问题?
2019/07/03 职场文书
阿里云k8s服务升级时502错误 springboot项目应用
2022/04/09 Servers